参考于https://www.cnblogs.com/zjf-1992/p/6832941.html
以及JavaScript基础教程第九版 17.2
分为移动端和windows端:
1.移动端使用touchstart、touchmove事件直接解决,用evt.changedTouches[0].pageX - touchStart_x + boxStartX和evt.changedTouches[0].pageY - touchStart_y + boxStartY表示事件的位置和元素大小进而得出当前的left和top
2.wndows端通过mousedown、mousemove、mouseup三个阶段通过控制isDraging来判断事件的情况
evt.clientX和evt.clientY表示事件发生时候的横纵坐标
box().offsetLeft和box().offsetTop表示元素距离父级元素的边距
box().style.left和box().style.top通过写入改变元素的css属性
①mousedown 鼠标按下时操作流程;
- 设置鼠标按下mousedown标识 isDraging
- 获取目标元素初始化的位置 initObjX initObjY
- 获取鼠标初始化的位置 initMouseX initMouseY
- 通过目标元素初始化的位置与鼠标按下时的位置计算元素偏移距离objX/objY
*设置元素的位置(objX/objY)
②mousemove 鼠标移动时操作流程(动态改变目标元素left/top值;请参考图2-1);
- 目标元素移动之前确保鼠标按下标识isDraging为true
- 目标元素水平方向移动距离(moveX) = 当前鼠标移动时位置 - 鼠标按下时鼠标初始化位置 + 鼠标按下时目标元素水平方向初始化位置initObjX
- 目标元素垂直方向移动距离(moveY) = 当前鼠标移动时位置 - 鼠标按下时鼠标初始化位置 + 鼠标按下时目标元素垂直方向初始化位置initObjX
- 设置目标元素水平方向(moveX/moveY)移动距离
③mouseup鼠标离开时操作流程
- 令isDraging=false;
- 停止动画 mouseup鼠标离开事件绑定在document上,原因是鼠标拖动过快离开时有可能不在目标元素上
html部分
<!DOCTYPE html>
<html>
<head>
<title>Drag n' drop touch demo</title>
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="script02.css">
<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<script src="drag.js"></script>
</head>