Vue.Draggable
Posted qqprincekin
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue.Draggable相关的知识,希望对你有一定的参考价值。
Vue.Draggable拖动效果
下载包:npm install vue-draggable --save
组件中引进依赖:
import draggable from ‘vuedraggable‘
注册:draggable这个组件
components: {
draggable
},
<draggable :options="{group:‘people‘,animation:150,ghostClass:‘sortable-ghost‘,chosenClass:‘chosenClass‘,scroll:true,scrollSensitivity:200}"
v-model="list2"
@change="change"
@start="start"
@end="end"
:move="move"
style="display: inline-block; width:190px;height: 200px;background: #eee;overflow: auto">
<li v-for="(item, index) in list2"
:class="setclass(item,index)"
:key="index">
{{item.name}}
</li>
</draggable>
事件
//evt里面有两个值,一个evt.added 和evt.removed 可以分别知道移动元素的ID和删除元素的ID change: function (evt) { console.log(evt) }, //start ,end ,add,update, sort, remove 得到的都差不多 start: function (evt) { console.log(evt) }, end: function (evt) { console.log(evt) evt.item //可以知道拖动的本身 evt.to // 可以知道拖动的目标列表 evt.from // 可以知道之前的列表 evt.oldIndex // 可以知道拖动前的位置 evt.newIndex // 可以知道拖动后的位置 }, move: function (evt, originalEvent) { console.log(evt) console.log(originalEvent) //鼠标位置 }
属性
group: "name", // or { name: "...", pull: [true, false, clone], put: [true, false, array] } name相同的组可以互相拖动 sort: true, // 内部排序列表 delay: 0, // 以毫秒为单位定义排序何时开始。 touchStartThreshold: 0, // px,在取消延迟拖动事件之前,点应该移动多少像素? disabled: false, // 如果设置为真,则禁用sortable。 store: null, // @see Store animation: 150, // ms, 动画速度运动项目排序时,‘ 0 ‘ -没有动画。 handle: ".my-handle", // 在列表项中拖动句柄选择器。 filter: ".ignore-elements", // 不导致拖拽的选择器(字符串或函数) preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter” draggable: ".item", // 指定元素中的哪些项应该是可拖动的。 ghostClass: "sortable-ghost", // 设置拖动元素的class的占位符的类名。 chosenClass: "sortable-chosen", // 设置被选中的元素的class dragClass: "sortable-drag", //拖动元素的class。 dataIdAttr: ‘data-id‘, forceFallback: false, // 忽略html5的DnD行为,并强制退出。(h5里有个属性也是拖动,这里是为了去掉H5拖动对这个的影响) fallbackClass: "sortable-fallback", // 使用forceFallback时克隆的DOM元素的类名。 fallbackOnBody: false, // 将克隆的DOM元素添加到文档的主体中。(默认放在被拖动元素的同级) fallbackTolerance: 0, // 用像素指定鼠标在被视为拖拽之前应该移动的距离。 scroll: true, // or HTMLElement scrollFn: function(offsetX, offsetY, originalEvent, touchEvt, hoverTargetEl) { ... }, // if you have custom scrollbar scrollFn may be used for autoscrolling scrollSensitivity: 30, // px, how near the mouse must be to an edge to start scrolling. scrollSpeed: 10, // px
拖动中
拖动结束
methods: { getdata (evt) { console.log(evt.draggedContext.element.id) }, datadragEnd (evt) { console.log(‘拖动前的索引 :‘ + evt.oldIndex) console.log(‘拖动后的索引 :‘ + evt.newIndex) console.log(this.tags) } }
Vue.Draggable链接地址: https://link.jianshu.com/?t=https%3A%2F%2Fgithub.com%2FSortableJS%2FVue.Draggable
自说自话,自己打自己脸(^o^)/~)
自封装拖动效果
<div id="app" @mousedown="move"> <!--绑定按下事件--> methods:{ move(e){ let odiv = e.target; //获取目标元素 //算出鼠标相对元素的位置 let disX = e.clientX - odiv.offsetLeft; let disY = e.clientY - odiv.offsetTop; document.onmousemove = (e)=>{ //鼠标按下并移动的事件 //用鼠标的位置减去鼠标相对元素的位置,得到元素的位置 let left = e.clientX - disX; let top = e.clientY - disY; //绑定元素位置到positionX和positionY上面 this.positionX = top; this.positionY = left; //移动当前元素 odiv.style.left = left + ‘px‘; odiv.style.top = top + ‘px‘; }; document.onmouseup = (e) => { document.onmousemove = null; document.onmouseup = null; }; } },
以上是关于Vue.Draggable的主要内容,如果未能解决你的问题,请参考以下文章