過濾jQuery的排序項

我有兩個DIV容器可排序，並與connectWith連接。在這兩個都有可排序的項目，我可以按預期拖放。這些項目有一些類，例如，group1和group2。我們稱容器爲container1和container2。我需要將group1項目拖放到任何容器中，並且group2項目只能在container2內拖放。我已閱讀jQuery文檔，但沒有找到答案或想法如何做到這一點。過濾jQuery的排序項

來源

2011-09-19 Sergei Basharov

嘗試訂閱的receive event。我沒有測試過這個，但我的猜測是，如果你返回錯誤（jQuery中阻塞事件的標準模式），那麼被刪除的項目將不會被添加到列表中。下面是一些僞代碼，讓你開始...

$("...").sortable(
{ 
    receive: function() 
    { 
     // assuming that "this" maps to the current object being dragged 
     if (this.className.indexOf("...")) return false; 
    } 
});

來源

2011-09-19 17:05:13 roosteronacid

編輯我想出了一個解決方案，更好地回答您的需求。這個代碼可以稍微調整一下，例如使group2的項目根本不可排序，即使它們已經在container1。

JS：

$(function() { 
    $(".container1,.container2").sortable(); 

    // on mousedown set the "connectWith" option of sortable depending on 
    // whenever item that user may start dragging has class "group1" or not 
    $(".container1 > li, .container2 > li").mousedown(function() { 
     var $this = $(this); 
     $this.parent().sortable("option", "connectWith", $this.hasClass('group1') ? '.connectedSortable' : false); 
    }) 
});

HTML：

<ul class="container1 connectedSortable"> 
    <li class="group1">item 1.1</li> 
    <li class="group2">item 1.2</li> 
    <li class="group1">item 1.3</li> 
    <li class="group2">item 1.4</li> 
</ul> 
<ul class="container2 connectedSortable"> 
    <li class="group1">item 2.1</li> 
    <li class="group2">item 2.2</li> 
    <li class="group2">item 2.3</li> 
    <li class="group1">item 2.4</li> 
    <li class="group2">item 2.5</li> 
</ul>

來源

2011-09-19 10:09:44 WTK

過濾jQuery的排序項

回答

相關問題