参考于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>
<body>
<div id="draggable">
Drag me!
<p id="boxLocation"></p>
</div>
</body>
</html>
js部分
//鼠标初始化位置
var initMouseX = 0;
var initMouseY = 0;
//元素的初始化位置
var initObjX = 0;
var initObjY = 0;
//鼠标按下标识
var isDraging = false;
//定义一个快速获取box元素
function box() {
return document.getElementById("draggable");
}
window.addEventListener(
"load",
function(evt) {
//移动端用touchmove事件
$("#box").on("touchstart", function(evt) {
touchStart_x = evt.targetTouches[0].pageX;
touchStart_y = evt.targetTouches[0].pageY;
boxStartX = $("#box").position().left;
boxStartY = $("#box").position().top;
})
document.getElementById("draggable").addEventListener("touchmove", function(evt) {
evt.preventDefault();
var dragBox = document.getElementById("draggable");
dragBox.style.left = (evt.changedTouches[0].pageX - touchStart_x + boxStartX) + "px";
dragBox.style.top = (evt.changedTouches[0].pageY - touchStart_y + boxStartY) + "px";
document.getElementById("boxLocation").innerHTML = "Top: " + dragBox.style.top + "<br>Left: " + dragBox.style.left;
}, false);
//windows端用mousedown、mousemove、mouseup结合使用
var moveX = box().offsetLeft;
var moveY = box().offsetTop;
document.getElementById("draggable").addEventListener("mousedown", function(evt) {
evt.preventDefault();
//鼠标初始化位置
initMouseX = evt.clientX;
initMouseY = evt.clientY;
//元素的初始化位置
initObjX = box().offsetLeft;
initObjY = box().offsetTop;
// initObjX = box().style.left;
// initObjY = box().style.top;
//鼠标按下标识
isDraging = true;
}, false);
document.getElementById("draggable").addEventListener("mousemove", function(evt) {
if (isDraging) {
//改变位置
moveX = evt.clientX - initMouseX + initObjX;
moveY = evt.clientY - initMouseY + initObjY;
//设置元素位置
box().style.left = moveX + 'px';
box().style.top = moveY + 'px';
}
}, false);
document.getElementById("draggable").addEventListener("mouseup", function(evt) {
isDraging = false;
document.getElementById("boxLocation").innerHTML = "Top: " + moveX + "<br>Left: " + moveY;
}, false);
},
false
);
css部分
#draggable {
position: absolute;
background-color: #FFC;
border: 5px solid yellow;
width: 100px;
height: 100px;
padding: 50px;
text-align: center;
font-family: Albany, Georgia, "Times New Roman", serif;
}
