如何使拖放列表复制而不是移动列表项

How to make Drag and Drop list make copy instead of moving the list item

本文关键字：列表 移动 复制 何使 拖放      更新时间：2023-09-26

我有两个不同的div，一个是列表项，另一个是空白的。我可以从左向右拖动列表项。我正在使用jQuery Sortable Bootstrap插件。

小提琴

使用此插件，如果我从左到右拖动一个列表 列出它会在右侧自行(移动(，但我的要求是，如果我拖放列表的副本，它将在右侧。它不应该移动。

因此，如果我从我的例子中说：我将项目 5 拖到右侧，将创建项目 5 的副本，而左侧保持不变。

我不确定是否可以使用 jQuery UI 插件完成，但我不想使用 UI，因为我是一个非常大的文件，而且我已经有很多了。因此，有关此插件或任何其他插件的任何帮助都将真正帮助我，因为我整天都被困在这里[对不起，英语不好]

.JS 

var adjustment
$("ol.simple_with_animation").sortable({
  group: 'simple_with_animation',
  pullPlaceholder: false,
  // animation on drop
  onDrop: function  (item, targetContainer, _super) {
    var clonedItem = $('<li/>').css({height: 0})
    item.before(clonedItem)
    clonedItem.animate({'height': item.height()})
    item.animate(clonedItem.position(), function  () {
      clonedItem.detach()
      _super(item)
    })
  },
  // set item relative to cursor position
  onDragStart: function ($item, container, _super) {
    var offset = $item.offset(),
    pointer = container.rootGroup.pointer
    adjustment = {
      left: pointer.left - offset.left,
      top: pointer.top - offset.top
    }
    _super($item, container)
  },
  onDrag: function ($item, position) {
    $item.css({
      left: position.left - adjustment.left,
      top: position.top - adjustment.top
    })
  }
})

我将第一个元素包装在另一个div中，并给灰色框一个id。然后，我在dragStart上使用jQuery的.clone(true, true)克隆灰色框。true, true参数对于克隆绑定到对象的事件侦听器非常重要。可排序库提供了afterMove，我在其上删除了原始的灰色div 并附加了它的克隆。

afterMove: function ($placeholder, container, $closestItemOrContainer) {
  b.remove();
  a.appendTo(append);
  $("ol.simple_with_animation").sortable("destroy");
  e();
},

我在对象上调用.sortable("destroy")，以便在递归执行e()函数时可以刷新它们的状态。

请注意，我已经将整个事情放在一个递归函数中，e()，但您可以使用另一个事件侦听器以不同的方式实现这一点。

这是JSFiddle。

相关文章：