jQuery：拖放到多個列表，不附加或可拖動

Question

我試圖創建一個拖放從一個列表到另外兩個之一。我一直在試圖使用draggable和droppable，但這種排序的演示看起來更像是我想要的東西：http://jqueryui.com/sortable/#connect-lists

我試圖用拖動/可棄做到這一點的，因爲我的嚴格要求：

1. 我都打印在頁面上幾天

2. 每一天都有3所列出：入站，等待和處理從入站

3. 項目可以拖到任未決或處理列表

4. 這些項目將被附加到所施加的列表上的待決和處理列表

5. 物品不能被拖動的底部，除了那些起源入站列表

上

由於這些我的想法是有個人入站列表項可拖動並追加到應用列表的末尾。

這裏是我使用的JS代碼：

$(document).ready(function() { 
    $('li.drag').draggable({ 
     revert: "invalid", 
     revertDuration: 100 
    }); 
    $('.pending-list').droppable({ 
     accept: ".inbound li", 
     drop: function(event, ui) { 
      $(this).appendChild($(ui)); 
     } 
    }); 
    $('.processed-list').droppable({ 
     accept: ".inbound li", 
     drop: function(event, ui) { 
      $(this).append($(ui)); 
     } 
    }); 
}); 

這裏是我的小提琴，但你可以看到（1）它沒有應用到列表的底部，（2）我動不了它再次之後： http://jsfiddle.net/wGWTS/1/

Answer 1

編輯：改變了代碼，因爲入站的最後是有趣的，當它沒有成員。

我想你想要使用sortable的connectWith和items選項的組合。部分可排序的功能是通過connectWith接受來自其他列表的項目，因此您不需要製作它droppable。通過使用items屬性，您可以選擇列表中的哪些成員應該可排序，以便強制執行條件＃5您只需要將來自入站列表的項目排序。這是通過給所有入站列表項「入站」的類來完成的。

以下是入站，待處理和出站列表的示例。入站中的項目可以在所有3個列表之間移動，並且源於待處理或出站的項目根本無法移動。在這裏看到一個小提琴：http://jsfiddle.net/ULmrD/4/

HTML

<div id=inbound class=sort> 
    <ul> 
     <li><b>Inbound</b></li> 
     <li class=inbound>Inbound Item 1</li> 
     <li class=inbound>Inbound Item 2</li> 
     <li class=inbound>Inbound Item 3</li> 
    </ul> 
</div> 
<div class=sort id=pending> 
    <b>Pending</b> 
    <ul> 
     <li>Pending Item 1</li> 
     <li>Pending Item 2</li> 
    </ul> 
</div> 

<div class=sort id=outbound> 
    <b>Outbound</b> 
    <ul> 
     <li>Outbound Item 1</li> 
     <li>Outbound Item 2</li> 
    </ul> 
</div> 

CSS

div.sort{ 
    border:1px solid black; 
    display:inline; 
    width:175px; 
    float:left; 
} 
ul{ 
    height:200px; 
    width:175px; 
} 

jQuery的

$(document).ready(function() { 
    $('div.sort li').disableSelection(); 

    $('#pending ul').sortable({ 
     revert: 'invalid', 
     connectWith: "#inbound ul, #outbound ul", 
     items: "li.inbound" 
    }); 

    $('#outbound ul').sortable({ 
     revert: 'invalid', 
     connectWith: "#inbound ul, #pending ul", 
     items: "li.inbound" 
    }); 

    $('#inbound ul').sortable({ 
     revert: 'invalid', 
     connectWith: "#pending ul, #outbound ul", 
     items: "li.inbound" 
    }); 

});