jQuery UI可排序：将元素拖放到非列表项

Question

我的清单是可排序的，一切都很好。 我现在想做的是能够将这些可排序的li元素之一拖放到其他div 。 我知道我可以将其他div connectWith ul并使用connectWith功能，但是在这种情况下，我不希望这样做。

我也尝试过在相同的li元素上使用draggable ，但是当我这样做时，它们不再是可排序的。

如何将可排序的li元素拖到花药特定的非ul div中？

Answer 1

如jQuery UI的文档所述：

默认情况下，可排序项目共享可拖动属性。

因此，您可以使用可排序列表将其放到droppable 。 当使用列表作为sortable您正在排序和拖动明显不能附加到ul或ol li要素，因此一种解决方案可能是提取该elemtent的内容并将其单独附加。

您可以使用droppable的drop方法并访问其中的ui.draggable ：

$("#sortable").sortable();

$("#droppable").droppable({
  drop: function(event, ui) {
  var $sortEl = $('<div>').html(ui.draggable.html());
    $(this).append($sortEl);
  }
});

---

例