jQuery UI 可排序 - 排除项目被删除答案

【问题标题】：jQuery UI sortable - Exclude Items from being droppedjQuery UI 可排序 - 排除项目被删除
【发布时间】：2012-06-26 12:46:58
【问题描述】：

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

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

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

非常感谢任何帮助。

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

【问题讨论】：

标签： jquery jquery-ui user-interface jquery-ui-sortable

【解决方案1】：

像这样添加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 示例

Exclude Items from being dropped jsfiddle example

另外，看看另一个例子

jQuery UI Sortable - Include / exclude items

编辑

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

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

喜欢这个

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

Exclude Items from being dropped on other sortable area

【讨论】：

这里是 dan man +1，但请参阅下面帖子中的旧参考 :)
感谢您的回答，但这并不能解决我的问题 :( 我忘了提到该项目（在示例中为项目 2）应该仍然是可排序的，但不能放在第二个列表中.
@Aley 更新了我的答案，您现在可以选择您希望允许丢弃的可排序区域（我的示例是我阻止您丢弃 id = sortable2 的区域）

【解决方案2】：

新 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 主题和内容：“交互提示”@987654326 @

希望这会有所帮助，:)

代码

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

【讨论】：

@Daniel Bro 我永远不会窃取任何人的代码相信我，特别是这样一个简单的例子:) 你认为它很难，除此之外你还好吗？ :) 这个问题也很常见：forum.jquery.com/topic/… 或我什至知道启用禁用出现问题的早期部分:) forum.jquery.com/topic/enable-disable-sort
很好很好，只是不明白为什么要发布已发布答案的exact duplicate
@Daniel lol cooleos，希望你没事，bruv，保重，如果你愿意，我也会为你 +1（如果这让你开心的话）放轻松，:)
您可以保留 +1（点击返回数字）...一切都很好，仍然...exact duplicate为什么是垃圾邮件？
垃圾邮件？真的吗？（我只是分享一个额外的链接以使 OP 更清楚）无论如何，伙计，拥有一个好的并保持我的 +1。

【解决方案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();

【讨论】：