jQuery UI可排序 - 排除项目被丢弃

Question

是否可以排除单个sortbale项目被丢弃在另一个列表上？

这是JsFiddle。例如。第2项不应该放在第二个清单上。

我真的不知道，如果这是可能的一些黑客，但遗憾的是在UI插件:(

任何帮助深表感谢别无选择

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

Answer 1

新http://jsfiddle.net/UKUfe/（本演示中第2项不在列表2可放开，但仍然排序:)

这将帮助：下面休息码和解释：

code

$("#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(); 


​ 

OLD

演示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类项目2这样

<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

---

编辑

既然你更新你的答案就完全改变了答案

你需要利用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

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();