java和vue实现拖拽可视化_Vue.Draggable实现拖拽效果
快速实现vue.Draggable的拖拽效果，供大家参考，具体内容如下
1.下载包：npm install vuedraggable
配置：package.json
"dependencies": {
"eleme
2.在你的组件中引进依赖：
import draggable from vuedraggable编程客栈
3.注册：draggable这个组件
components: {
draggable
},
4.使用html模板中使用该组件
{ {element.name}}
{ {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
快速实现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