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" 
    }); 

});