点击需要拖动元素时，获取该元素的初始位置。
鼠标移动期间 获取元素当前的位置信息
计算
进行事件监听
拖拽的实现原理：通过事件mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除），拖拽的过程就是mousemove阶段；
问题产生的原因：因为mousemove 的间隔性触发，当两次mousemove事件触发的间隔中，鼠标移动距离出了element的范围，就会产生鼠标脱离element范围，拖拽就停止，
解决方法： 将mousemove事件挂在docment，而不是对应的element，此时鼠标滑动只要不出docment范围就不会触发上述情况。
拖动事件完成的动作时是：mousedown（事件的触发） →mousemove（事件的控制） →mouseup（事件的清除） 但是mouseup的时候 同时会触发 点击事件（如果元素上面有点击事件的话）
处理办法：记录mousedown(记录开始时间) →mousemove→mouseup（记录结束时间） 的时间 根据时间长短判断是进行了点击事件还是进行了拖拽事件。
正常需求的话 就希望拖拽元素只在屏幕的可视范围内进行拖拽，不能跑出去。
在onmousemove 中添加边缘控制就好，具体范围可以根据具体需求更改。
1.先在元素上添加属性 <div draggable="true"></div>,定义了这个属性后就可以注册拖动的事件了
2.拖动事件:
开始拖动时dragstart
进行拖动时drag
结束拖动时dragend
3.拖拽区域触发事件:
拖拽元素进入区域时触发dragenter
拖拽元素进入区域后悬停触发dragover
拖拽元素离开区域时触发dragleave
拖拽元素放置时触发drop
一、安装依赖
npm install vuedraggable --save
npm insall sortablejs --save
二、引入依赖
import draggable from 'vuedraggable'
import Sortable from 'sortablejs'
三、JS函数拖动改变顺序（数组）：
drag(){
let newArr=this.checkMaterial.join(',')
let el = document.getElementById('items')
//let sortable = Sortable.create(el)
let that=this
Sortable.create(el,{
group: newArr,
store: {
//获取初始的数组
get: function (sortable) {
// console.log(sortable.options.group.name)
let order = sessionStorage.getItem(sortable.options.group.name)
return order ? order.split(',') : []
},
//获取排序之后的数组
set: function (sortable) {
var order = sortable.toArray()
sessionStorage.setItem(sortable.options.group.name, order.join(','))
that.checkMaterial=order
}
}
})
}
