draggable布局 vue_vue-draggable配置从入门到精通
以上是实现项目结果，难点在于二级的拖动不会影响三级，就是二级领导可以随便换，三级员工保持不变，一二三级可以随便拖拽，还有一些新建和条件弹窗等功能。vue-draggable是数据驱动的，实现以上效果，而且布局要随之变化，确实花费了一些功夫。
首先
我们讲一下vue的基础用法，在掌握了基础用法以后，我们就会融汇变通，实现比较难的需求。
安装
cnpm i vuedraggable -S
使用
使用很简单，在需要使用拖拽的界面引入，组件中注册，就可以使用了。
import draggable from 'vuedraggable'
...
export default{
components:{
draggable,
},
...
属性
group: { name: "...", pull: [true, false, clone],
tag: 'td' // 默认div，设置draggable标签解析html标签
v-model：data // 绑定数据列表
put: [true, false, array] } //name相同的组可以互相拖动, pull可以写条件判断，是否允许拖走，put可以写条件判断，是否允许拖入
sort: true, // 内部拖动排序列表
delay: 0, // 以毫秒为单位定义排序何时开始。
touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
disabled: false, // 如果设置为真，则禁用sortable。
animation: 150, // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
handle: ".my-handle", // 在列表项中拖动句柄选择器，设置某些地方拖动才有效。
filter: ".ignore-elements", // 不能拖拽的选择器(字符串 class)
preventOnFilter: true, // 调用“event.preventDefault()”时触发“filter”
draggable: ".item", // 指定元素中的哪些项应该是可拖动的class。
ghostClass: "sortable-ghost", // 设置拖动元素的class的占位符的类名。
chosenClass: "sortable-chosen", // 设置被选中的元素的class
dragClass: "sortable-drag", //拖动元素的class。
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) { ... },
scrollSensitivity: 30, // px
scrollSpeed: 10, // px
事件
start,add,remove,update,end,choose,unchoose,sort,filter,clone
start (evt) {} // 刚开始拖动时候触发
add (evt) {} // 拖拽新增的时候触发
remove (evt) {} // 从列表拖走，移除触发
update (evt) {} // 列表更新触发
end (evt) {} // 和start对应，拖拽完了触发
choose(evt) {} // 选择拖拽元素触发
sort (evt) {} // 排序触发
change (evt) {} // 这个很重要，如果数据不是整个提交，单个提交数据的时候就会用到它 evt.added.element / evt.removed.element如果这个列表添加元素就会added的数据，如果删除元素就是removed的元素，还会获取到移动和删除的所在位置index
:move (evt, dragevt) {} // 这个也很重要，在两个列表相互拖拽的时候，有时候需要更新ui，在接口还没有更新之前，所以就会用到move，他是把元素从一个列表拖到另一个列表的瞬间触发，这时候可以给原来的位置设置元素样式等等。
firefox 火狐浏览器默认拖拽搜索问题
created () {
// 阻止火狐浏览器默认的拖拽搜索行为
document.body.ondrop = (event) \=> {
// 阻止事件默认行为
event.preventDefault()
// 阻止时间冒泡
event.stopPropagation()
}
}
safari浏览器的拖拽问题
safari浏览器拖动一次，不能连续拖动第二次，只能在空白处单机才可以继续拖拽，添加 :forceFallback="true"解决
:group="{name: 'scene', pull: 'clone'}"
:sort="false"
:forceFallback="true"
好了基础知识到此为止，多看看官方文档。
https://github.com/SortableJS/Vue.Draggable
未完待续(分析项目难点以及实现过程，源代码)...
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！