快速实现vue.Draggable的拖拽效果,供大家参考,具体内容如下
1.下载包:npm install vuedraggable
配置:package.json
"dependencies": {
"eleme
2.在你的组件中引进依赖:
import draggable from 'vuedraggable'编程客栈
3.注册:draggable这个组件
components: {
draggable
},
4.使用html模板中使用该组件
{{element.name}}
5.有两个常用的方法
一个是拖动中
一个是拖动结束
methods: {
getdata (evt) {
console.log(evt.draggedCo编程客栈ntext.element.id)
},
datadragEnd (evt) {
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
console.log(this.tags)
}
}
现在你就可以自己尝试使用了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
本文标题: Vue.Draggable实现拖拽效果
本文地址: http://www.cppcns.com/ruanjian/java/192570.html