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

Question

是否可以锁定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)

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

Answer 1

这是一个希望无错误的版本,在你拖动时更新.它在排序开始时生成项目的当前所需位置,这意味着您应该能够在需要时更改类,刷新小部件的列表项并且您很高兴.

它还使用sortable的内置items属性来防止拖动固定项并排除列表顶部和底部的任何排序问题.

我试图移动固定的物品,但这导致了可怕的马车行为,特别是当群体中有多个固定物品时.最终解决方案从列表中分离所有固定项目,在前面添加一个辅助元素,然后将固定元素重新插入到所需位置,这似乎可以修复所有错误.

试试这里的演示:http://jsfiddle.net/PQrqS/1/

HTML:

<ul id="sortable">
    <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>

CSS:

.static { color:red; }

li { background-color:whitesmoke; border:1px solid silver; width:100px; padding:2px; margin:2px; }

使用Javascript:

$('#sortable').sortable({
    items: ':not(.static)',
    start: function(){
        $('.static', this).each(function(){
            var $this = $(this);
            $this.data('pos', $this.index());
        });
    },
    change: function(){
        $sortable = $(this);
        $statics = $('.static', this).detach();
        $helper = $('<li></li>').prependTo(this);
        $statics.each(function(){
            var $this = $(this);
            var target = $this.data('pos');

            $this.insertAfter($('li', $sortable).eq(target));
        });
        $helper.remove();
    }
});

Answer 2

我扩展了jQuery.Ui.sortable:

概观

jQuery.Ui.sortable小部件扩展fixed功能.此功能允许用户修复列表中的元素.
使用.fixedsortable()构造函数,您可以构建一个.sortable()使用这些功能进行扩展的类.您也可以使用原始方法和扩展方法.

码

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

例

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

用法

一般:

要使用,请将fixed属性添加到可排序列表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个多小时:(我疯了..

Answer 3

检查一下:强制项目保留在jQuery UI可排序列表中

另外,我在这里用多个固定元素实现了上面的解决方案:http://jsfiddle.net/enBnH/12/(已废弃,见下文)我认为这是相当不言自明的.

编辑:

我已经自动化了生成lockto值的过程,并将ID添加到li"固定"类的那些(注意我必须添加一个ID,以便我们可以引用它)

请在此处查看完整的解决方案:http://jsfiddle.net/enBnH/44/

编辑

好吧,在经历了上述的大量错误之后,我只是重写了自己的一件事:http: //jsfiddle.net/thomas4g/GPMZZ/15/

注意:上面的确有效,但@ DarthJDG的回答似乎对我来说好多了.我离开了我的人,可能更喜欢我的行为(我学会了不删除东西,因为有更好的版本:P)