vuedraggable事件-获取组件而不是HTML元素

Question

我正在使用vuedraggable构建一个App，并且我正在拖动vue组件。所以我的问题是:有没有可能从vuedraggbale-Events中获得组件，而不仅仅是HTML-Elements。看看这里的可排序文档，https://github.com/RubaXa/Sortable#event-object-demo，我找不到这样做的方法。你有什么想法吗？谢谢你

Answer 1

使用change处理程序查找数据。下面是一个最小的工作示例：

​

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>

​