動態設置connectWith同時拖動jQuery排序

Question

我有一個列表應該與另一個列表連接，但是對於列表中的每個項目，目標列表會更改。

我使用

connectWith: '.valid' 

然後在我的on('sortstart')功能（當項目被拖動），我檢查的項目屬性和appplying類valid到相應的列表與連接。我也然後運行一個$('.valid').sortable()

問題是，即使類正確地應用於匹配列表，它甚至獲得可排序的類，該項目將不會與它連接，但將在第二個嘗試...

我意識到這可能會問太多的jquery sortables，但它真的會很好，如果有辦法。

對此的任何想法將不勝感激。

下面是簡化的代碼或多或少顯示的問題。

http://codepen.io/anon/pen/PboBvj

Answer 1

首先，這可能是一個可能的重複：reject invalid sortable item in a sortable list

要回答你的問題，這是可以做到，只要你不開車的樣子。下面是從你的示例代碼工作的例子：https://jsfiddle.net/Twisty/56kfcba5/

HTML

<ul id="list0" class="source"> 
    <li id="item-1" data-connect="list1">ITEM 1</li> 
    <li id="item-2" data-connect="list2">ITEM 2</li> 
</ul> 

<ul id="list1" class="target"></ul> 
<ul id="list2" class="target"></ul> 

請記住，所有的ID應該是唯一的。

CSS

.source, 
.target { 
    border: 1px solid #000; 
    min-height: 20px; 
    max-width: 200px; 
} 

jQuery的

$(function() { 
    $('.source').sortable({ 
    connectWith: '.target', 
    revert: true 
    }); 
    $(".target").sortable({ 
    receive: function(e, ui) { 
     if (ui.item.data("connect") !== $(this).attr("id")) { 
     // reject the item 
     ui.sender.sortable('cancel'); 
     } 
    } 
    }) 
}); 

就像我聯繫到文章中，我們比較從source項目時target名單接受它。在這種情況下，connectTo選項也可以是單向的。通過這種方式，我們設置了不接受特定項目的目標。