jQuery UI可拖动：克隆项并禁用对其（原始项）的第二次拖动

我有以下情况：

用户可以从不同的表中选择要包含在视图中的列

我希望每个表的列都有一个单独的列表，以及一个包含用户从视图中选择的列的列表

我希望用户将列从表x、y、z拖放到视图中

我发现了一个有趣的故事

 <a href="http://jsfiddle.net/B5PH4/253">JSfiddle</a>

这允许我将列表项从顶部div复制到目标div，但存在一些问题：

同一列表项可以复制无限次，但只应包含一次，然后以某种方式停用

在放入target div之后，无法删除并发回该项。我再次提到，视图中将有一个target，而各个表的列将有多个source。我希望删除的项目返回到正确的表格中

我很清楚这一点。但它似乎没有给我对上述第2期拖放源/目标所需的控制水平

你做过类似的事情吗？你至少知道解决方案的一部分吗？或者你能给我推荐另一个jQuery插件吗

---

谢谢

这里我调整了jquery示例中的列表，因此它应该是您想要的

所发生的是排序表1和3是表，排序表2是视图

我只将排序表1和3连接到了2，但没有反过来停止拖回表，然后有一个“移除”按钮，用于分离项目并使用属性将其放回正确的位置。 你也可以像这样跟踪位置

jQuery UI可排序-连接列表 排序1，排序2，排序3{ 边框：1px实心eee； 宽度：142px； 最小高度：20px； 列表样式类型：无； 保证金：0； 填充：5px0； 浮动：左； 右边距：10px； } 可排序1 li，可排序2 li，可排序3 li{ 保证金：0 5px 5px 5px； 填充物：5px； 字体大小：1.2米； 宽度：120px； } $function{ $sortable1，sortable3.可排序{ 连接：可排序2 }; $sortable2.可排序{}； $sortable1 span，sortable3 span.clickfunctionevent{ var item=$event.target.closest'li'； $+$event.target.attr'parent'.appenditem.detach； }; } ; 项目1* 项目2* 项目1 项目2 项目1* 项目2*

---

非常感谢你！这正是我所寻找的。例如，如果我将每个ul放在一个单独的div中，并带有position:relative，那么只要我将li从其原始列表中从sortable1拖动到sortable2，辅助对象就会消失。我只剩下指针了。它仍然有效，但看起来很糟糕。你知道怎么解决这个问题吗？我需要位置：相对包装，以实现完美的滚动。如果我从CSS中删除position:relative，并让其他内容保持不变，那么助手就回来了。这是我得到的。这可能是元素的z索引有问题吗？嘿，安德鲁·麦基。再次感谢您的关注。请看一下这个。我注意到，如果我删除position:relative或overflow:auto/scroll，它就会工作，但为了使用perfectscrollbar，我需要这两个选项。助手是它所在的div的子对象，这就是为什么它会弄乱滚动条。您需要做的是将helper:clone、appendTo:document.body添加到可排序的1和3。这意味着helper元素被克隆，然后被附加到body，因此它不再是div的子元素。因此，您可能需要更改某些样式。