先看实现效果
首相引入插件
-
npm i -S vuedraggable
在使用页面
import draggable from "vuedraggable";
components: { volumeConversion },
list:[1,2,3]
<draggable v-model="list" group="player" animation="500" delay="0" :disabled="false" ghostClass="ghost" chosenClass="chosen" forceFallback @start="onStart" @end="onEnd" :move="onMove" class="draggable">
<div v-for="(item, index) in list" :key="index">{
{item}}</div>
</draggable>
onStart(e) {
// 开始拖动时触发的事件
// console.log("start:", e);
// console.log("拖拽操作前的索引oldIndex:",