vuedraggable 事件 - 获取组件而不是 HTML-Element

Question

我正在使用 vuedraggable 构建一个应用程序，并且我正在拖动 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>