使用VueDraggable自定义“幽灵”元素

Question

我使用以下库：https://github.com/SortableJS/Sortable

我有 2 个列表，我可以将一个元素拖动到另一个列表。但是当我拖动该项目时，它是图标的克隆。 我想做的是当您在列表之间移动项目时。我希望自定义元素显示为“Ghost elememt”，而不是图标。

在 sortableJS 中，有一个名为“ghostClass”的东西可以工作，但它只添加自定义类。 但现在我还想自定义幽灵元素。

有办法做到这一点吗？

Answer 1

我找到了可以在 VueDraggable 中自定义“ghost”元素的部分。对于未来有同样问题的开发者。

您有以下方法：

// Called when dragging element changes position
onChange: function(/**Event*/evt) {
    evt.newIndex // most likely why this event is used is to get the dragging element's current index
    // same properties as onEnd
}

因此以下解决了我的问题：

<VueDraggable :onChange="sectionChange " ...

本身的功能：

const sectionChange = (evt) => {
  evt.item.innerHTML = `<div style="margin:0 auto;background:red;width:100px;">ADD ICON</div>`
}