jquery - jQuery UI 可排序 - 排除项目被删除

Question

是否可以排除单个分类项目被删除到另一个列表中？

这是一个JsFiddle。例如，第 2 项不应放在第二个列表中。

我真的不知道这是否可以通过一些黑客攻击，但不幸的是 UI 插件没有选项:(

任何帮助深表感谢。

编辑： 我忘了提到该项目（在示例中是项目 2）应该仍然是可排序的，但不能放在第二个列表中。

Answer 1

新的 http://jsfiddle.net/UKUfe/（在这个演示中，项目 2 不能放在列表 2 中，但仍然可以排序:)

这将有所帮助：下面的其余代码和解释：

代码

$("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    items: "li:not(.ui-state-disabled)",
    receive: function(event, ui) {

        if ($(ui.item).hasClass("foohulk")) {
           $(ui.sender).sortable('cancel');

            return false;

        }

    }
}).disableSelection();


​

老的

演示 http://jqueryui.com/demos/sortable/items.html 或 http://jsfiddle.net/GGVeA/2/

Jquery 论坛中的类似问题：http: //forum.jquery.com/topic/can-i-lock-an-li-in-place-in-a-sortable-list

与选项等的良好链接。：http: //jqueryui.com/demos/sortable/

如果你想禁用项目添加.ui-state-disabled到项目li，（我听说你说：为什么ui-state-disabled :)要转到以下链接并阅读 API 主题和内容：“交互提示” http://jqueryui.com/docs/Theming/API

希望这可以帮助， ：）

代码

$( "#sortable1, #sortable2" ).sortable({
        connectWith: ".connectedSortable",
        items: "li:not(.ui-state-disabled)"
}).disableSelection();

Answer 2

items: "li:not(.ui-state-disabled)"像这样添加

$( "#sortable1, #sortable2" ).sortable({
    connectWith: ".connectedSortable",
    items: "li:not(.ui-state-disabled)"
}).disableSelection();​

并像这样将ui-state-disabled类添加到Item2

<li class="ui-state-default ui-state-disabled">Item 2</li>`

这里 jsfiddle 示例

排除项目被丢弃 jsfiddle 示例

另外，看看另一个例子

jQuery UI 可排序 - 包括/排除项目

---

编辑

由于您更新了答案，它完全改变了答案

您需要利用updatesortable 的事件并检查即将被删除的元素是否是禁止元素

像这样

update:function(event, ui) {
    if(ui.item.hasClass('ui-state-disabled') && ui.item.parent()[0].id === 'sortable2') return false;                
}

将项目排除在其他可排序区域上

Answer 3

我发现 Tats_innit 的回答很有帮助。我需要添加的一个额外部分是在无法删除项目时隐藏占位符。

我想这是对问题的一个足够常见的补充，所以我想我会分享它 - 您只需要处理sort事件，执行相同的类检查，您就可以通过ui.placeholder对象访问占位符。

因此，在前面的答案示例（http://jsfiddle.net/GGVeA/2/）的上下文中，完整的添加将是：

$("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    items: "li:not(.ui-state-disabled)",
    receive: function (event, ui) {

        if ($(ui.item).hasClass("foohulk")) {
            $(ui.sender).sortable('cancel');

            return false;

        }
    },
    sort: function (event, ui) {
        if ($(ui.item).hasClass("foohulk")) {
            ui.placeholder.hide();
        } 
        else {
            ui.placeholder.show();
        }
    }
}).disableSelection();