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

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

见this example on JSBin,其中有3个列表,其中一个是空的.拖动任何列表项,并将其放在< div>上包裹列表的元素(绿色),我希望该项目转到包含的< ul>的末尾. (红色).还需要自动调用sortable的更新函数.怎么样？

$('.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'));
  }
});

解决方法

您可以通过克隆辅助元素然后从DOM中删除原始元素来完成此操作.

注意,你必须清除style属性,因为它有位置：绝对设置用于拖动,这可以防止克隆在ul中正确定位.当然你可以对此更加细化并添加/删除类等.

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

Here’s更新了JSBin示例.