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