vuedraggable Events - getting components instead of HTML-Element

Question

I'm building an App using vuedraggable and I'm dragging vue components. So my question is: is there a possibility to get the component from the vuedraggbale-Events instead of only HTML-Elements. Looking at sortable documentation here https://github.com/RubaXa/Sortable#event-object-demo I can't find a way doing this. Do you have any idea? Thx you

Answer 1

Make use of the change handler to find the data. Here's a minimum working example:

const app = new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'Alan', content: 'a' },
      { name: 'Blake', content: 'b' },
      { name: 'Chris', content: 'c' },
      { name: 'Dora', content: 'd' },
      { name: 'Ellen', content: 'e' }
    ],
    history: []
  },
  methods: {
    afterAdd(evt) {
      console.log(evt)
      const element = evt.moved.element
      const oldIndex = evt.moved.oldIndex
      const newIndex = evt.moved.newIndex
      this.history.push(`${element.name} is moved from position ${oldIndex} to ${newIndex}`)
    }
  }
})

.dragArea {
  border: solid 1px black;
  background-color: grey;
  min-height: 10px;
}



.document-item {
  background-color: white;
  border: solid 1px black;
  margin: 8px 8px 8px 8px;
}

<!-- CDNJS :: Vue (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Sortable/1.6.0/Sortable.min.js"></script>

<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.14.1/vuedraggable.min.js"></script></script>
<div id="app">
  <div>
    <h3>History: </h3>
    <div>
      <ul>
        <li v-for="msg in history">{{msg}}</li>
      </ul>
    </div>
  </div>
  <draggable 
      class="dragArea" 
      :options="{group:'people'}"
      @change="afterAdd"
      :list="items">
      <div
        class="document-item"
        v-for="(item, index) in items" 
        :key="index">
        <h3>{{item.name}}</h3>
      </div>
    </draggable>
    
</div>