vue.draggable中文文档

vue.draggable ghostClass 目标位置占位符的样式

vue.draggable ghostClass 目标位置占位符的样式及需要停靠位置的样式。

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>

例子

Catalog
快速入门 js 版本 vue3 版本 常用例子 vue.draggable 单列拖拽 vue.draggable 表格拖动 vue.draggable 多列拖动 属性列表 group 拖拽分组 delay 响应时间 disabled 启用禁用 scroll 是否允许滚动 animation 过渡效果 handle 可拖动元素 filter 排除元素 chosenClass 选中样式 ghostClass 位符样式 clone 拷贝拖拽 事件列表 全部事件列表 move 自定义控制 add 拖拽完成事件 start 开始拖动