vuedraggable⼿册
vuedraggable 是⼀个基于Vue框架的拖拽组件。
⽬前被⼴泛⽤于活动布局
import draggable from 'vuedraggable';
属性：
draggable <example> draggable=".item" ⾥的.item 指的是可以drag的class选择器
v-model <example> v-model="myArray" 传⼊drag⾥组件或ele绑定的数据
tag <example> tag="ul" 绑定<draggable>标签为新的标签该实例为<ul></ul>
:list <example> :list="listArr" 和 v-model原理类似将数据传⼊组件 listArr可以在drag⾥可渲染
handle <example> handle=".handleclass"  选择可拖拽的ele  在.handleclass 这个选择器下的ele可以拖拽
html animation属性
v-bind 绑定⼀个属性是可以的可以绑定⼀个 dragOptions这个dragOptions是个computed 可以绑定drag的
属性 <example> animation: 200, group: "description", disabled: false, ghostClass: "ghost" 或者通过 :other="other"同样可以绑定属性但是这样绑定⽅法不可绑定到dragOptions⾥让dragOptions⽣效
animation动画可单独放⼊ :animation="100"
group 可将多个draggable分组 <example> 当group="a"时所有组名⼀样的可以互拖
⽅法
@start="method" 当开始移动时触发method并返回event含开始位置信息等等
@end="method" 当结束移动时触发method并返回event含开始和结束位置信息等等
插槽
slot="header" 从顶部插⼊⼀个内容
slot="footer" 从底部插⼊⼀个内容
dragOptions() {
return {
animation: 200,
group: "description",
disabled: false,
ghostClass: "ghost"
};
},
<draggable v-model="myArray" draggable=".item">
<div v-for="element in myArray" :key="element.id" class="item">
{{element.name}}
</div>
<button slot="header" @click="addPeople">Add</button>
</draggable>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。