Vue.Draggable 不同的行为取决于放置位置

Question

我正在使用 Vue.Draggable 进行一些拖放操作。

是否可以从移动元素更改为克隆取决于您拖动它的位置？

即。如果我将它拖放到 A 区，我想要移动元素的正常行为但如果我将它拖放到 B 区，我想改为克隆该元素。

有人知道怎么做吗？谢谢

Answer 1

您可以使用 put 和 pull 作为动态控制行为的函数。请参阅 group 选项。

<div id='app'>
  <draggable class='area' :group='group' :list='list1'>
    <div class='item' v-for='element in list1' :key='element.name'>
      {{ element.name }}
    </div>
  </draggable>
  <draggable class='area' group='foo' :list='list2' data-zone='A'>
    <div class='item' v-for='element in list2' :key='element.name'>
      {{ element.name }}
    </div>
  </draggable>
  <draggable class='area' group='foo' :list='list3' data-zone='B'>
    <div class='item' v-for='element in list3' :key='element.name'>
      {{ element.name }}
    </div>
  </draggable>
</div>

group() {
  return {
    name: 'foo',
    put: false,
    pull(to) {
      let zone = to.el.dataset.zone
      switch (zone) {
        case 'A': return true
        case 'B': return 'clone'
      }
      return false
    }
  }
}

Example

Vue.Draggable 不同的行为取决于放置位置

Vue.Draggable different behaviour depends on drop location

javascript

draggable

vue.js