Question

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

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

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

有人有任何见解吗？

提前致谢。

代码：

$( "#listA" ).droppable({accept: "#listB li"}).sortable({
}).disableSelection();


$( "#listB li" ).draggable({
    appendTo: "body",
    helper: "clone",
    connectToSortable: '#listA'
}).droppable({accept: "#listA"});


<ul id="listA">
  <li id="ul_item_1">item-1</li>
  <li id="ul_item_2">item-2</li>
  <li id="ul_item_3">item-3</li>
</ul>
<br>
<br>
<ul id="listB">
  <li id="ul_item_4">item-4</li>
  <li id="ul_item_5">item-5</li>
  <li id="ul_item_6">item-6</li>
</ul>

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

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

谢谢！

Answer 1

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

示例1

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

HTML

<ul class="sortable" id="listA">
  <li id="ul_item_1">item-1</li>
  <li id="ul_item_2">item-2</li>
  <li id="ul_item_3">item-3</li>
</ul>
<br>
<br>
<ul class="sortable" id="listB">
  <li id="ul_item_4">item-4</li>
  <li id="ul_item_5">item-5</li>
  <li id="ul_item_6">item-6</li>
</ul>

的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/

更新

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

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

示例2

与Example1类似，除了List2像您在示例中一样克隆..

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

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

1 个答案: