js移动和拖拽

移动

• 绝对定位法
• onmousedown：鼠标按键按下事件。
  获取鼠标位置，获取被拖拽元素的位置，记录两者之间的纵横坐标的差值(clientX和offsetX差值, clientY和offsetY差值)。
• onmousemove：模拟拖拽中事件。
  鼠标拖动即发生 onmousemove 事件。对容器元素绑定 。将被拖拽元素的 position 改成绝对位置，这个可以通过 left 和 top 改变该元素的位置，从而使得该元素随着鼠标的拖拽而移动。获取鼠标位置，将鼠标 x 坐标（ e.clientX ）减去第 2 步储存的横坐标差作为被拖动元素的 left 值，将鼠标y 坐标（ e.clientY ）减去第 2 步储存的纵坐标差作为被拖动元素的 top 值。实现元素跟随鼠标拖动的效果。
• onmouseup：模拟拖拽结束事件。
  鼠标按键弹起即发生 onmouseup 事件。对容器元素绑定 . 可以回收 onmousemove 和 onmousedown中的 事件和变量，一次拖拽至此结束。

拖拽

• 设置元素为 draggable
• dragstart ：当用户开始拖动对象时触发。(拖拽对象)
• dragenter ： 当鼠标第一次经过目标元素，且有拖动发生时触发。此事件的监听者应指明在这个位置上是否允许 drop ，或者监听者不执行任何操作，那么 drop 默认是不允许的。(放置目标)
• dragover ：当鼠标经过一个元素时，且有拖动发生时触发 。需要 e.preventDefault() 防止drag失效 (放置目标)
• dragleave ：当鼠标离开一个元素，且有拖动在发生时触发。(放置目标)
• drag ：当对象被拖动，每次移动鼠标时触发。(拖拽对象)
• drop ：在 drag 操作的最后发生 drop 时，在元素上触发此事件。监听者应该负责检索拖动的数据，并插入 drop 的位置。(放置目标)
• dragend ：在拖动对象时放开鼠标按键时触发。(拖拽对象)