vue.draggable ghostClass 目标位置占位符的样式及需要停靠位置的样式。
<template>
<div>
<!--ghostClass停靠位置样式 -->
<div class="itxst">
<div>自定义控制拖拽和停靠</div>
<div class="col">
<draggable v-model="arr1" group="itxst" ghostClass="ghost" chosenClass="chosen" filter=".forbid" animation="300" :move="onMove">
<transition-group>
<div :class="item.id==1?'item forbid':'item'" v-for="item in arr1" :key="item.id">{{item.name}}</div>
</transition-group>
</draggable>
</div>
<div class="col">
<draggable v-model="arr2" group="itxst" ghostClass="ghost" chosenClass="chosen" filter=".forbid" animation="300" :move="onMove">
<transition-group>
<div :class="item.id==1?'item forbid':'item'" v-for="item in arr2" :key="item.id">{{item.name}}</div>
</transition-group>
</draggable>
</div>
</div>
</div>
</template>
例子