vue拖拽插件(彈框拖拽)


// =======拖拽 插件
cnpm install vuedraggable
import draggable from 'vuedraggable'


<draggable v-model="tags" :move="getdata" @update="datadragEnd">
<transition-group>
<div class="testdiv" v-for="element in tags" :key="element.id">
{{element.id}}
</div>
</transition-group>
</draggable>

data() {
return {
msg: 'Welcome to Your Vue.js App',
tags: [{
id: 1
}, {
id: 2
}]
}
},
methods: {
getdata(evt) {
console.log(evt.draggedContext.element.id)
},
datadragEnd(evt) {
console.log('拖動前的索引 :' + evt.oldIndex)
console.log('拖動后的索引 :' + evt.newIndex)
console.log(this.tags)
}
},

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM