vue2.0使用vuedraggable实现组件拖动排序

之前做了小程序页面编辑器,现在需要实现左侧预览组件可以拖动排序,如下图:
vue2.0使用vuedraggable实现组件拖动排序_第1张图片
插件文档:

Vue.Draggable

安装:

npm i vuedraggable -S

代码:

<template>
	<draggable v-model="list" @update="dragEnd">
		<div v-for="(item,index) in list"></div>
    </draggable>
</template>
<script>
	import draggable from 'vuedraggable'
	export default {
		components:{
			draggable
		},
		data(){
			return{
				list:[]
			}
		},
		methods(){
			dragEnd (e) {
                e.preventDefault();//通知 Web 浏览器不要执行与事件关联的默认动作
                console.log(e.oldIndex)//拖动前index
                console.log(e.newIndex)//拖动后index
            },
		}
	}
</script>

你可能感兴趣的:(前端)