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