模型演示如图：
移动端拖拽事件
移动端的拖拽制作原理和 PC 端思路是一样的。都是通过各自的API获取事件的位置，然后求差，通过绝对定位来改变元素的位置。
写前了解：移动端的三个事件touchstart touchmove touchend 分别对应移动端手指按下，移动，抬起。三个事件必须使用 DOM 二级添加监听。其中前两个事件对应的方法是event.touches[0].clientX。最后一个抬起对应的事件是 event.changedtouches[0].clientX。
实现思路：
手指按下移动通过event.touches[0].clientX 来取得手指的位置，两者之间的差，就作为元素的偏移位置。需要注意的是最后一步抬起的事件里面的内容。前面如果每次我们按下抬起就改变元素的位置，会发现元素已有的top 和 left 没有记住，总是给盒子偏移位置。最后一步就是用来记住，按下抬起时，元素的位置，下次按下移动加上偏移位置作为元素的位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>移动端的拖拽事件</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui">
<style>
img {
position: absolute;
top: 100px;
width: 50%;
height: auto;
}
</style>
</head>
<body>
<h3>监听状态：</h3><p>无动作</p>
<img src="./images/0.jpg" alt="天安门">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
var img = document.getElementsByTagName("img")[0];
var lisp = document.getElementsByTagName("p")[0];
var starX,starY,dtop = 100,dleft = 0,x,y;
img.addEventListener("touchstart",function(event){
starX = event.touches[0].clientX;
starY = event.touches[0].clientY;
lisp.innerHTML = "按下";
},false);
img.addEventListener("touchmove",function(event){
lisp.innerHTML = "移动";
x = event.touches[0].clientX - starX;
y = event.touches[0].clientY - starY;
img.style.top = y + dtop + "px";
img.style.left = x + dleft + "px";
},false);
img.addEventListener("touchend",function(){
dtop += y;
dleft += x;
lisp.innerHTML = "抬起";
},false);
</script>
</body>
</html>
JQuery 版：
<body>
<h3>监听状态：</h3><p>无动作</p>
<img src="./images/0.jpg" alt="天安门">
<script src="js/jquery-3.4.1.min.js"></script>
<script>
var starX,starY,dtop = 100,dleft = 0,x,y;
$("img").eq(0).on("touchstart",function(event){
starX = event.touches[0].clientX;
starY = event.touches[0].clientY;
$("p").eq(0).html("按下");
});
$("img").eq(0).on("touchmove",function(event){
x = event.touches[0].clientX - starX;
y = event.touches[0].clientY - starY;
$("img").eq(0).css("top",y + dtop + 'px');
$("img").eq(0).css("left",x + dleft + 'px');
$("p").eq(0).html("移动");
});
$("img").eq(0).on("touchend",function(event){
$("p").eq(0).html("抬起");
dtop += y;
dleft += x;
});
</script>
</body>
