//页面块
<draggable element="Form" v-bind:list="itemConfigData" v-bind ="dragOptions">
<transition-group type="transition" tag="div">
<FormItem v-for="(formItem, formIndex) in itemConfigData" :key="formIndex+'a'">
<img class="tableHandle "/>
<Input type="text" v-model="formItem.name"></Input>
<img class="imgClass" />
<img class="imgClass"/>
</FormItem>
</transition-group>
</draggable>
//js块 配置写在computed里
computed:{
dragOptions() {
return {
animation: 200,//拖拽的动画效果
group: {
// 只允许放置shared的控件,禁止pull
put: ["shared"]
},
handle:".tableHandle"//拖拽手柄的class
ghostClass: "ghost",//拖拽中占位的元素的类名(一般设置opacity:1)达到空出该位置的视觉效果
draggable:".items",//只有该类名的元素才可拖拽
forceFallback:true,//当forceFallback设置为true时,拖放过程中鼠标附着单元的样式
fallbackClass:'fallback',//当forceFallback设置为true时,拖放过程中鼠标附着单元的样式
// 禁止拖动排序
sort: false
};
},
}
vuedraggable的简单使用
最新推荐文章于 2024-08-07 16:40:14 发布