|
Vue.Draggable实现拖拽效果
这篇文章主要介绍了Vue.Draggable实现拖拽效果，使用简单方便
，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
快速实现Vue.Draggable的拖拽效果，供大家参考，具体内容如下 1.下载包：npm install vuedraggable 配置：package.json
"dependencies": {
"element-ui": "^1.3.4",
"less": "^2.7.2",
"less-loader": "^4.0.4",
"vue": "^2.3.3",
"vue-router": "^2.3.1",
"vuedraggable": "^2.11.0"
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
5.有两个常用的方法 一个是拖动中 一个是拖动结束
methods: {
getdata (evt) {
console.log(evt.draggedContext.element.id)
datadragEnd (evt) {
console.log('拖动前的索引 :' + evt.oldIndex)
console.log('拖动后的索引 :' + evt.newIndex)
console.log(this.tags)
现在你就可以自己尝试使用了。 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。 |
