0
点赞
收藏
分享

微信扫一扫

Vue.Draggable拖拽效果

捌柒陆壹 2022-05-12 阅读 81

1.下载包:npm install vuedraggable

配置:package.json

Vue.Draggable拖拽效果_html模板

"dependencies": {
"vuedraggable": "^2.11.0"
},

Vue.Draggable拖拽效果_html模板

2.在你的组件中引进依赖:

import draggable from 'vuedraggable'


3.注册:draggable这个组件

components: {
  draggable
},


4.使用html模板中使用该组件


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

Vue.Draggable拖拽效果_html模板

5.有两个常用的方法

一个是拖动中

一个是拖动结束

Vue.Draggable拖拽效果_html模板

methods: {
getdata (evt) {
console.log(evt.draggedContext.element.id)
},
datadragEnd (evt) {
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
console.log(this.tags)
}
}


配置:package.json

Vue.Draggable拖拽效果_html模板

"dependencies": {
"vuedraggable": "^2.11.0"
},

Vue.Draggable拖拽效果_html模板

2.在你的组件中引进依赖:

import draggable from 'vuedraggable'


3.注册:draggable这个组件

components: {
  draggable
},


4.使用html模板中使用该组件

Vue.Draggable拖拽效果_html模板

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

Vue.Draggable拖拽效果_html模板

5.有两个常用的方法

一个是拖动中

一个是拖动结束

Vue.Draggable拖拽效果_html模板

methods: {
getdata (evt) {
console.log(evt.draggedContext.element.id)
},
datadragEnd (evt) {
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
console.log(this.tags)
}
}

Vue.Draggable拖拽效果_html模板



举报

相关推荐

0 条评论