html5 Sortable.js 源码分析

Posted 2020-08-17

最近公司项目经常用到一个拖拽 Sortable.js插件，所以有空的时候看了 Sortable.js 源码，总共1300多行这样，写的挺完美的。拖拽的时候主要由这几个事件完成， 

    ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
    ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
    ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
    ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
    ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上

主要是拖拽的时候发生ondragstart事件和ondragover事件的时候节点交换位置，其实就是把他们的节点互相调换，当然这只是最简单的拖拽排序方式，里面用到了许多技术比用判断拖拽滚动条的时候是滚动拖拽元素上面的根节点的父节点滚动，还是滚动window上面的滚动条， 还有拖拽的时候利用getBoundingClientRect() 属性判断鼠标是在dom节点的左边，右边，上面，还是下面。还有利用回调和函数式编程声明函数，利用布尔值相加相减去，做0和1判断，利用了事件绑定来判定两个列表中的不同元素，这些都是很有趣的技术。