Vue.Draggable different behaviour depends on drop location

Question

I am using Vue.Draggable for some drag and drop stuff.

Is it possible to change from Moving the element to Clone depends on where you drag it?

ie. if I drag and drop it into Zone A, I want the normal behaviour of moving the element but if I drag and drop it into Zone B, I want to clone the element instead.

Anyone know how to do that? thanks

Answer 1

You can use put and pull as a function to control the behavior dynamically. See group option.

<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