jQuery UI Droppable - 克隆 droppable 元素？

Question

JSFiddle：https://jsfiddle.net/dy556efs/2/

左侧的元素在放到右侧时应该被克隆。目前，它们已完全移动 - 无法让克隆助手正常工作。

你能指出我正确的方向吗？

$(".social-msl-link-label").draggable({
    connectToSortable: ".social-msl-group-list",
    revert: "invalid",
    helper: "clone"
});

$(".social-msl-links-order li").droppable({
    accept : ".social-msl-link-label",
    tolerance: 'pointer',
    greedy : true,
    hoverClass: 'highlight',
    drop: function(ev, ui) {
        $(ui.draggable).detach().css({position : 'relative', top: 'auto',left: 'auto'}).appendTo(this);
    }
});

Answer 1

根据helper property 的文档，该元素似乎只是在 拖动它时被克隆。换句话说，您仍然必须在分离/附加元素之前手动克隆元素。在分离之前使用.clone() method：

Updated Example

$(".social-msl-links-order li").droppable({
  accept: ".social-msl-link-label",
  tolerance: 'pointer',
  greedy: true,
  hoverClass: 'highlight',
  drop: function(ev, ui) {
    $(ui.draggable).clone(true).detach().css({
      position: 'relative',
      top: 'auto',
      left: 'auto'
    }).appendTo(this);
  }
});

---

如果您想删除重复项，您可以遍历可放置元素并将先前放置的元素的文本与兄弟元素进行比较。在drop 回调内部：

Updated Example

// ...
$(this).siblings().filter(function () {
  return $(this).text().trim() === $(ui.draggable).text().trim();
}).empty();