先看实现效果
首相引入插件
-
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:", e.oldIndex);
// console.log("拖拽完成后的索引newIndex:", e.newIndex);
},
onEnd(e) {
// 拖动完成时触发的事件
// console.log("end:", e);
// console.log("拖拽操作前的索引oldIndex:", e.oldIndex);
// console.log("拖拽完成后的索引newIndex:", e.newIndex);
},
onMove(e, originalEvent) {
// 拖拽move事件回调
// console.log("move:", e);
// console.log("originalEvent:", originalEvent);
// 不允许拖拽
// return false; // false表示阻止,true表示不阻止
return true;
},