vuedraggableイベント - HTML要素の代わりにコンポーネントを取得する

Question

私はvuedraggableを使用してアプリケーションを構築していますが、私はvueコンポーネントをドラッグしています。ですから、私の質問は、コンポーネントをHTML要素だけでなく、vuedraggbale-Eventsから取得する可能性があることです。ここでソート可能なドキュメントを見る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>