微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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示例.

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐