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

相关文章

页面搜索关键词突出 // 页面搜索关键词突出 $(function () {...
jQuery实时显示日期、时间 html: &lt;span id=&quot...
jQuery 添加水印 &lt;script src=&quot;../../../.....
中文:Sys.WebForms.PageRequestManagerParserErrorExceptio...
1. 用Response.Write方法 代码如下: Response.Write(&q...
Jquery实现按钮点击遮罩加载,处理完后恢复 思路: 1.点击按...