标签:避免 list www event 解决 官方 overflow 适应 解决问题
最近公司需要做任务看板,需要拖拽效果。点击查看效果。由于网站是基于vue的技术栈,最开始找了一个现成的vue封装的拖拽组件:Vue.Draggable,该组件是基于sortable封装的。但是由于使用的原生html5的拖拽属性,导致拖拽过程有透明度,而且不能修改透明度和倾斜度,达不到产品的要求(产品要求模仿worktile的使用体验)。同时我也看了同行很多类似的看板效果,都有倾斜度和非透明,经研究,采用的jquery-ui的sortable。所以,死皮赖脸的选择jquery-ui的sortable来操作,其实是极不情愿的使用:因为基于jQuery的,jQuery占空间太大。但由于是pc端,也还可以接受。
在开发之前,可以先看jquery-ui的sortable的官方文档和国人整理的文档的一些实例。
引入jquery库和jquery-ui库
// 引入样式文件
<link rel="stylesheet" href="https://static.clouderwork.com/task/static/js/jquery-ui.min.css">
// 引入jquery 库
<script src="https://static.clouderwork.com/task/static/js/jquery.min.js"></script>
// 引入jquery-ui库
<script src="https://static.clouderwork.com/task/static/js/jquery-ui.min.js"></script>
使用实例代码
// 初始化拖拽
initSort () {
// 拖拽时开始滚动的间距
var scrollingSensitivity = 20
// 拖拽时滚动速度
let scrollingSpeed = 20
// 拖拽前的父级节点
let dragBeforeParentNode = null
// 初始化拖拽函数
$('.task-lists').sortable({
// 自适应placeholder的大小
forceHelperSize: true,
// 拖拽时的鼠标形状
cursor : '-webkit-grabbing',
// 拖拽的父级节点(该节点一定要注意,配置错误会导致当前屏幕外的元素没法自动滚动拖拽,两列之间拖拽的滚动也会出问题)
appendTo: '.drag-task',
// 拖拽时的倾斜度
rotate: '5deg',
// 延迟时间(毫秒),避免和click同时操作时出现的冲突
delay: 150,
// 以clone方式拖拽
helper: 'clone',
// 拖拽到边框出现滚动的间距,
scrollSensitivity:scrollingSensitivity,
// 应用于拖拽空白区域的样式
placeholder: 'portlet-placeholder ui-state-highlight',
// 允许拖拽预留空白区域
forcePlaceholderSize: true,
// 多个列表之间的拖拽的dom元素
connectWith: '.task-lists',
// 拖拽结束函数
stop: (e, ui) => {
// 当前拽入的元素
let item = $(ui.item)
// 当前拽入元素的下标
let index = item.index()
let kid = ''
// xxxx 这里面可以操作数据更新
},
// 开始拖拽时的函数
start: (e, ui) => {
// 拖拽前的父级节点
dragBeforeParentNode = ui.item[0].parentNode
// 让placeholder和源高度一致
ui.placeholder.height(ui.helper[0].scrollHeight).width(258)
// xxxx 这里可以记录一些拖拽前的元素属性
},
// 处理两列滚动条问题
sort:function(event, ui){
var scrollContainer = ui.placeholder[0].parentNode
// 跨列拖拽的情况
if (dragBeforeParentNode && dragBeforeParentNode.id !== scrollContainer.id) {
// 设置拽入的列表的滚动位置
var overflowOffset = $(scrollContainer).offset()
if((overflowOffset.top + scrollContainer.offsetHeight) - event.pageY < scrollingSensitivity) {
scrollContainer.scrollTop = scrollContainer.scrollTop + scrollingSpeed
} else if(event.pageY - overflowOffset.top < scrollingSensitivity) {
scrollContainer.scrollTop = scrollContainer.scrollTop - scrollingSpeed
}
}
}
}).disableSelection()
==在开发的时候一定要多看文档,了解其属性的含义会事半功倍,顺延解决问题。==
下面给一个实例供参考:jquery-ui-sortable 实例, 源代码在github上面,地址
标签:避免 list www event 解决 官方 overflow 适应 解决问题
原文地址:http://www.cnblogs.com/shinggang/p/7857328.html