vue-draggable实现pc端拖拽效果
school是什么意思英语
本⽂实例为⼤家分享了vue-draggable实现pc端拖拽效果的具体代码，供⼤家参考，具体内容如下
载荷谱为了实现下⾯这种布局可拖拽整合调整位置
拖拽前：
拖拽后：
⼀、安装
npm i -S vuedraggable
⼆、使⽤
引⼊：
import draggable from 'vuedraggable'
注册
components:{
draggable
},
使⽤
<draggable :options="{group:'people',animation:150,ghostClass:'sortable-ghost',chonClass:'chonClass',scroll:true,scrollSensitivity:200}" v-model="list2"
@change="change"
@start="start"
@end="end"
:move="move"
>
<li v-for="(item, index) in list2"
:key="index">
{{item.name}}
</li>
</draggable>
list2:[{value:1,name:"中国"},{value:1,name:"中国"},{value:1,name:"中国"}],
事件：
//evt⾥⾯有两个值，⼀个evt.added 和ved 可以分别知道移动元素的ID和删除元素的ID
change: function (evt) {
the是什么意思console.log(evt)
},
//start ,end ,add,update, sort, remove 得到的都差不多
start: function (evt) {
console.log(evt)
},
end: function (evt) {
去角质的正确方法console.log(evt)
evt.item //可以知道拖动的本⾝
< // 可以知道拖动的⽬标列表
evt.from // 可以知道之前的列表
evt.oldIndex // 可以知道拖动前的位置
国王英文wIndex // 可以知道拖动后的位置
},
基本瑜伽动作
move: function (evt, originalEvent) {
console.log(evt)
console.log(originalEvent) //⿏标位置
}
属性
group: "name", // or { name: "...", pull: [true, fal, clone], put: [true, fal, array] } name相同的组可以互相拖动
sort: true, // 内部排序列表
delay: 0, // 以毫秒为单位定义排序何时开始。
touchStartThreshold: 0, // px，在取消延迟拖动事件之前，点应该移动多少像素?
disabled: fal, // 如果设置为真，则禁⽤sortable。
ecfa
store: null, // @e Store
animation: 150, // ms, 动画速度运动项⽬排序时，' 0 ' -没有动画。
handle: ".my-handle", // 在列表项中拖动句柄选择器。
filter: ".ignore-elements", // 不导致拖拽的选择器(字符串或函数)
preventOnFilter: true, // 调⽤“event.preventDefault()”时触发“filter”
draggable: ".item", // 指定元素中的哪些项应该是可拖动的。
ghostClass: "sortable-ghost", // 设置拖动元素的class的占位符的类名。
chonClass: "sortable-chon", // 设置被选中的元素的class
dragClass: "sortable-drag", //拖动元素的class。
dataIdAttr: 'data-id',
forceFallback: fal, // 忽略HTML5的DnD⾏为，并强制退出。（h5⾥有个属性也是拖动，这⾥是为了去掉H5拖动对这个的影响）
fallbackClass: "sortable-fallback", // 使⽤forceFallback时克隆的DOM元素的类名。
fallbackOnBody: fal, // 将克隆的DOM元素添加到⽂档的主体中。（默认放在被拖动元素的同级）
fallbackTolerance: 0, // ⽤像素指定⿏标在被视为拖拽之前应该移动的距离。
字典 在线scroll: true, // or HTMLElement
scrollFn: function(offtX, offtY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be ud for autoscrolling scrollSensitivity: 30, // px, how near the mou must be to an edge to start scrolling.
scrollSpeed: 10, // px
slot：
使⽤footer插槽在vuedraggable组件内添加不可拖动的元素。重要：它应该与可拖动选项⼀起使⽤，以标记可拖拽元素。注意，在默认情况下，页脚槽将始终被添加
unicity<draggable v-model="myArray" :options="{draggable:'.item'}">
<div v-for="element in myArray" :key="element.id" class="item">
{{element.name}}
</div>
<button slot="footer" @click="addPeople">Add</button>
</draggable>
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
有趣的英文
