JQuery可排序列表和固定/锁定项目

是否可能锁定列表项目在JQuery可排序列表中的方式，这些项目将保留在列表中的特定位置。

例如，

考虑这个带有锁定项目的伪列表…

item A
item B(locked)
item C(locked)
item D
item E
item F
item G(locked)

所以，我想要固定项目B，C和G，使得如果用户在列表的开始处拖放项目D，项目A“跳过”固定/锁定项目B和C有以下结果…

item D
item B(locked)
item C(locked)
item A
item E
item F
item G(locked)

我一直在寻找这样的东西没有运气。可能吗..？

解决方法

我扩展了jQuery.Ui.sortable：

概述

jQuery.Ui.sortable小部件扩展具有固定功能。此功能允许用户修复列表中的元素。
使用.fixedsortable()构造函数构造一个使用特性扩展的.sortable()类。您可以使用原始方法和扩展。

码

https://gist.github.com/3758329#file_fixedsortable.js> fixedsortable.js

例

http://jsfiddle.net/omnosis/jQkdb/

用法

一般：

要使用，请将固定属性添加到可排序列表optios：

$("#list").fixedsortable({
   fixed: (value)
})

该值可以是：

>整数示例：3
>整数数组示例：[1,2,5]
>一个html元素或一个html元素的列表
>一个css选择器
> jquery对象

HTML：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> //the jquery 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> //the original jquery-ui   
<script type="text/javascript" src="https://raw.github.com/gist/3758329/91749ff63cbc5056264389588a8ab64238484d74/fixedsortable.js"></script> //the extended sortable
...
<ul id="sortable1">
    <li>oranges</li>
    <li class="static">apples</li>
    <li>bananas</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li class="static">pears</li>
    <li>mango</li>
</ul>

<ul id="sortable2">
    <li>bananas</li>
    <li foo="asd">oranges</li>
    <li foo="dsa">apples</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li>pears</li>
    <li>mango</li>
</ul>

<ul id="sortable3">
    <li>bananas</li>
    <li>oranges</li>
    <li>apples</li>
    <li>pineapples</li>
    <li>grapes</li>
    <li>pears</li>
    <li>mango</li>
</ul>

Javascript

$(function() {
    $("#sortable1").fixedsortable({
        fixed: "> .static"
    });

    $("#sortable2").fixedsortable({
        fixed: $("li[foo]").css("background","red")
    });

    $("#sortable3").fixedsortable({
        fixed: 2
    })
});

笔记：

如果你坚持使用.sortable而不是.fixedsortable，你可以使用这个https://gist.github.com/3758329#file_sortable.js而不是jquery.ui库。这是一个完全替换的jQuery.ui，但我不建议使用这，因为以后的更新。

我一直在这工作超过12小时:(我疯了..