Question

如何才能使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'));
  }
});

Answer 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示例。

jQuery UI可排序 - 允许删除到父级

1 个答案: