jQuery UI 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 it seems like the element is only cloned while dragging it. In other words, you still have to manually clone the element before detaching/appending it. Use the .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();