第一步,执行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('拖动后的索引 :' + evt.newIndex)
}
样式根据不同场景单独定义设置