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

Posted 2021-04-20

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

FIDDLE

有了这个插件，如果我从左到右拖动一个列表列表它自己在右侧移动（移动）但我的要求是如果我拖放列表的COPY将在右侧。它不应该动。

所以，如果我从我的例子中说：我将第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参数对于克隆绑定到对象的事件侦听器很重要。 Sortable库提供afterMove，我删除原始灰色div并附加其克隆。

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

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

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

Here's the JSFiddle.