JQuery UI可拖动且可放置但不可排序

我的网页上有2个列表，其中包含以下场景：

1. 列表A是可排序的。
2. 列表B是可拖动的，可以使用列表A进行删除，但不能自行排序。

我已经尝试过来自JQuery UI的示例，并在SO上查找了一些post。 似乎无法让＃2工作。

有人有任何见解吗？

提前致谢。

码：

$( "#listA" ).droppable({accept: "#listB li"}).sortable({ }).disableSelection(); $( "#listB li" ).draggable({ appendTo: "body", helper: "clone", connectToSortable: '#listA' }).droppable({accept: "#listA"}); 
 
item-1
 
item-2
 
item-3
 
 
 
 
 
item-4
 
item-5
 
item-6
  

这是JSFiddle链接： http ： //jsfiddle.net/kmenezes/8eCJH/

我有ListA按预期工作（可拖动，可放置和可排序）。 我无法将一个项目放入ListB。 这就是我需要的才能实现这一目标。

谢谢！

Answer 1

我无法使用它如何在你的例子中设置它。我做了几轮工作，希望对你有所帮助。

例1

• 您可以在列表A和列表B之间移动，但如果您尝试对列表B进行排序，则会将其还原。

HTML

 
 
item-1
 
item-2
 
item-3
 
 
 
 
 
item-4
 
item-5
 
item-6
  

jQuery的

 $('#listA, #listB').sortable({ helper: "clone", placeholder: "selected-option", forcePlaceholderSize: true, dropOnEmpty: true, revert: true, connectWith: '.sortable', tolerance: "pointer", cursor: "move", beforeStop: function (event, ui) { if($(ui.helper).parent().attr('id') === 'listB' && $(ui.placeholder).parent().attr('id') === 'listB') return false; } }); 

小提琴： http ： //jsfiddle.net/trevordowdle/PK3LE/

UPDATE

mccc为示例1提供了不会引发错误的更新。 （看评论）

小提琴： http ： //jsfiddle.net/PK3LE/8/

例2

• 与Example1类似，除了List2克隆，就像你的示例中一样。

小提琴： http ： //jsfiddle.net/trevordowdle/PK3LE/2/