vue图片拖拽

vue图片拖拽

第一步，执行cnpm install vuedraggable -S，安装vuedraggable插件；

第二步，在vue文件里引入插件：import draggable from 'vuedraggable';

第三步，在components组件里定义 draggable;

第四步，具体代码：

首先在<template>里定义如下组件，v-model=为要拖动的数组，此处为imageUrl，@update改变数据位置，:options为拖动特效；

<draggable v-model="imageUrl" @update="datadragEnd" :options="{animation:500}"><transition-group ><div v-for="(element,index) in imageUrl" :key="element.rscUrl"><img :src="element.rscUrl" /></div></transition-group>
</draggable>

在js方法里添加，实现拖动

            datadragEnd (evt) {evt.preventDefault();console.log('拖动前的索引 :' + evt.oldIndex)console.log('拖动后的索引 :' + wIndex)}

样式根据不同场景单独定义设置

转载于: