vuedraggable事件 - 獲取組件而不是HTML元素

Question

我正在使用vuedraggable構建應用程序，並且正在拖動vue組件。所以我的問題是：是否有可能從vuedraggbale-Events而不是僅從HTML-Elements獲取組件。在這裏查看可排序的文檔https://github.com/RubaXa/Sortable#event-object-demo我找不到這樣做的方法。你有什麼主意嗎？ Thx you

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>