代码：
<html>
<header>
<title>
drag
</title>
<style>
#drag {
width: 500px;
height: 100px;
background: cornflowerblue;
border-radius: 50px;
box-shadow: lightsteelblue 5px 5px 5px;
position: relative;
left: 100px;
top: 100px;
}
</style>
</header>
<body>
<div id="drag">
</div>
<script>
var dragEl = document.querySelector('#drag');
var HEIGHT, WIDTH, TIMEOUT;
dragEl.addEventListener('touchstart', function (e) {
var touches = e.touches[0];
HEIGHT = touches.clientY - this.offsetTop;
WIDTH = touches.clientX - this.offsetLeft;
document.body.addEventListener('touchmove', function (e) {
e.preventDefault()
}, false)
}, false);
dragEl.addEventListener("touchmove", function (e) {
var touches = e.touches[0];
var LEFT = touches.clientX - WIDTH;
var TOP = touches.clientY - HEIGHT;
var DRAGEL_WIDTH = this.offsetWidth;
var BODY_WIDTH = document.documentElement.clientWidth;
var DRAGEL_HEIGHT = this.offsetHeight;
var BODY_HEIGHT = document.documentElement.clientHeight;
if (LEFT < 0) {
LEFT = 0;
} else if (LEFT > BODY_WIDTH - DRAGEL_WIDTH) {
LEFT = BODY_WIDTH - DRAGEL_WIDTH;
}
if (TOP < 0) {
TOP = 0
} else if (TOP > BODY_HEIGHT - DRAGEL_HEIGHT) {
TOP = BODY_HEIGHT - DRAGEL_HEIGHT;
}
this.style.left = LEFT + 'px';
this.style.top = TOP + 'px';
}, false);
dragEl.addEventListener('touchend', function (e) {
document.body.removeEventListener('touchmove', function (e) {
e.preventDefault()
}, false)
}, false);
</script>
</body>
</html>
touch 事件：
touchstart: //触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。
touchmove: //在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
touchend: //从屏幕上移开时触发。
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用。
每个触摸事件都包括了三个触摸列表：
touches：表示当前跟踪的触摸操作的touch对象的数组。
当一个手指在触屏上时，event.touches.length=1,
当两个手指在触屏上时，event.touches.length=2，以此类推。
targetTouches：特定于事件目标的touch对象数组。因为touch事件是会冒泡的，所以利用这个属性指出目标对象。
changedTouches：表示自上次触摸以来发生了什么改变的touch对象的数组。
这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：
clientX：//触摸目标在视口中的x坐标。
clientY：//触摸目标在视口中的y坐标。
identifier：//标识触摸的唯一ID。
pageX：//触摸目标在页面中的x坐标。
pageY：//触摸目标在页面中的y坐标。
screenX：//触摸目标在屏幕中的x坐标。
screenY：//触摸目标在屏幕中的y坐标。
target：//触摸的DOM节点目标。
offsetLeft offsetTop offsetWidth offsetHeight
offsetLeft:元素的边框的外边缘距离与已定位的父容器（offsetparent）的左边距离（不包括元素的边框和父容器的边框）。
offsetTop:同理是指元素的边框的外边缘距离与已定位的父容器（offsetparent）的上边距离（不包括元素的边框和父容器的边框）。
offsetWidth:描述元素外尺寸宽度，是指元素内容宽度+内边距宽度(左右两个)+边框(左右两个)，不包括外边距和滚动条部分。
offsetHeight:同理 描述元素外尺寸高度，是指 元素内容高度+内边距高度(上下两个)+边框(上下两个)，不包括外边距和滚动条部分。
clientLeft clientTop clientWidth clientHeight
clientLeft:元素的内边距的外边缘和边框的外边缘的距离，实际就是边框的左边框宽度
clientTop:同理边框的上边框的宽度
clientWidth:用于描述元素内尺寸宽度，是指 元素内容+内边距 大小，不包括边框、外边距、滚动条部分
clientHeight:同理 用于描述元素内尺寸高度，是指 元素内容+内边距 大小，不包括边框、外边距、滚动条部分
scrollTop scrollLeft scrollWidth scrollHeight
scrollWidth：内容区域尺寸加上内边距加上溢出尺寸，当内容正好和内容区域匹配没有溢出时，这些属性与clientWidth和clientHeight相等 !important
scrollHeight：同上
scrollTop：滚动条上方卷去的高度
scrollLeft：滚动条左边卷去的宽度
网友评论