jQuery UI 可排序 - 允许拖放到父级答案

【问题标题】：jQuery UI sortable - allow dropping to parentjQuery UI 可排序 - 允许拖放到父级
【发布时间】：2011-03-08 10:21:18
【问题描述】：

我怎样才能使它成为一个可排序的 jQuery UI，允许在不同列表之间拖动，也可以接受被拖放到父级上？

参见this example on JSBin，其中有 3 个列表，其中一个为空。当拖动任何列表项并将其放在包装列表的<div> 元素上（绿色）时，我希望该项目位于包含的<ul>（红色）的末尾。 sortable 的update 函数也需要自动调用。怎么样？

$('.sortable').sortable(
{ 
  accept: '.sortable li', 
  connectWith: '.sortable,.container',
  update: function () { alert('done with the moving'); }
});

我的尝试（不起作用）是使包含 <div> 的目标成为可放置的目标，如下所示：

$('.container').droppable(
{
  accept: '.sortable li',
  drop: function(event, ui)
  {
    ui.draggable.appendTo($(this).find('ul'));
  }
});

【问题讨论】：

标签： jquery

【解决方案1】：

您可以通过克隆辅助元素然后从 DOM 中删除原始元素来做到这一点。

注意，您必须清除样式属性，因为它设置了用于拖动的position:absolute，这会阻止克隆在ul 中正确定位。当然，您可以对此进行更细化并添加/删除类等。

$('.container').droppable(
{
  accept: '.sortable li',
  drop: function(event, ui)
  {
    ui.draggable.clone().attr("style", "").appendTo( $(this).find("ul") );
    ui.draggable.remove();
  }
});

Here's 更新的 JSBin 示例。

【讨论】：