监听mousedown事件
- 获取鼠标点击元素,判断是否可拖拽
- 设置flag做标记
- 建一个tempDOM,与拖拽的DOM内容相同,并添加相应样式
- 监听鼠标移动事件
- 判断flag
- 移动tempDOM
- 监听mouseup事件
- 判断flag标记
- 清楚flag标记
- 获取DOM排列顺序
- 重排
1.先在元素上添加属性 <div draggable="true"></div>,定义了这个属性后就可以注册拖动的事件了
2.拖动事件:
开始拖动时dragstart
进行拖动时drag
结束拖动时dragend
3.拖拽区域触发事件:
拖拽元素进入区域时触发dragenter
拖拽元素进入区域后悬停触发dragover
拖拽元素离开区域时触发dragleave
拖拽元素放置时触发drop