博客

第一步，执行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)
            }

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