Disallowing the movement of one element from an area to an another one using Vue.Draggable

Question

I use Vue.Draggable (https://github.com/SortableJS/Vue.Draggable) for Vue 2.

I try to prohibit the movement of one element from an area to an another one (from a draggable component to an another which are in the same group), but I don't know how to do it.

I tried to implement the solutions which are described here Vue draggable. Prevent drop on specific node and allow drop on specific node, but I didn't achieve anything.

More specifically, I tried to use the @change event listener, but when I move an element it doesn't call the function which I set to it:

HTML:

<div v-bind:key="draggableArea.id" v-for="(draggableArea,draggableAreaIndex) in draggableAreas">
    <draggable :id="draggableAreaIndex" @change="test()" group="draggableArea">
    ...draggable elements...
    </draggable>
</div>

Javascript:

  methods: {
    test () {
      console.log('hi!')
      return false
    }
  }

Furthermore, I tried to use the move prop, but even that when I move an element doesn't call the function which I set to it:

HTML:

   <div v-bind:key="draggableArea.id" v-for="(draggableArea,draggableAreaIndex) in draggableAreas">
        <draggable :id="draggableAreaIndex" :move="test" group="draggableArea">
        ...draggable elements...
        </draggable>
    </div>

Javascript:

  methods: {
    test (evt) {
       console.log(evt)
       return false
    }
  }

Can someone help me with the solution of this problem ?

Thank you

Answer 1

I found the solution. In order to use the @change event listener or the move prop, I had to use in draggable component either the v-bind directive or the list prop which are described here: https://github.com/SortableJS/Vue.Draggable In order to prohibit the movement of an element I used the move prop and it worked fine for me.