本文介绍了如何在移动端和Windows平台上实现元素的自由拖拽功能。在移动端利用touchstart、touchmove事件，而在Windows端则通过mousedown、mousemove、mouseup事件。详细讲解了各个事件处理过程，并给出了可能遇到的问题及解决方案，如IIS环境下因双重转义序列导致的安全错误，可以通过修改web.config文件解决。
参考于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>
最低0.47元/天 解锁文章
233
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
