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();