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

【问题标题】：Vue.Draggable different behaviour depends on drop locationVue.Draggable 不同的行为取决于放置位置
【发布时间】：2020-07-02 12:43:57
【问题描述】：

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

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

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

有人知道怎么做吗？谢谢

【问题讨论】：

标签： javascript vue.js draggable

【解决方案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

【讨论】：