代碼：
<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: //觸摸屏幕時觸發(fā)；即使已經(jīng)有一個手指放在了屏幕上也會觸發(fā)。
touchmove: //在屏幕上滑動時連續(xù)的觸發(fā)。在這個事件發(fā)生期間，調(diào)用preventDefault()可阻止?jié)L動。
touchend: //從屏幕上移開時觸發(fā)。
touchcancel: //系統(tǒng)取消touch事件的時候觸發(fā)，這個好像比較少用。
每個觸摸事件都包括了三個觸摸列表：
touches：表示當(dāng)前跟蹤的觸摸操作的touch對象的數(shù)組。
當(dāng)一個手指在觸屏上時，event.touches.length=1,
當(dāng)兩個手指在觸屏上時，event.touches.length=2，以此類推。
targetTouches：特定于事件目標(biāo)的touch對象數(shù)組。因為touch事件是會冒泡的，所以利用這個屬性指出目標(biāo)對象。
changedTouches：表示自上次觸摸以來發(fā)生了什么改變的touch對象的數(shù)組。
這些列表里的每次觸摸由touch對象組成，touch對象里包含著觸摸信息，主要屬性如下：
clientX：//觸摸目標(biāo)在視口中的x坐標(biāo)。
clientY：//觸摸目標(biāo)在視口中的y坐標(biāo)。
identifier：//標(biāo)識觸摸的唯一ID。
pageX：//觸摸目標(biāo)在頁面中的x坐標(biāo)。
pageY：//觸摸目標(biāo)在頁面中的y坐標(biāo)。
screenX：//觸摸目標(biāo)在屏幕中的x坐標(biāo)。
screenY：//觸摸目標(biāo)在屏幕中的y坐標(biāo)。
target：//觸摸的DOM節(jié)點目標(biāo)。
offsetLeft?offsetTop offsetWidth offsetHeight
offsetLeft:元素的邊框的外邊緣距離與已定位的父容器（offsetparent）的左邊距離（不包括元素的邊框和父容器的邊框）。
offsetTop:同理是指元素的邊框的外邊緣距離與已定位的父容器（offsetparent）的上邊距離（不包括元素的邊框和父容器的邊框）。
offsetWidth:描述元素外尺寸寬度，是指元素內(nèi)容寬度+內(nèi)邊距寬度(左右兩個)+邊框(左右兩個)，不包括外邊距和滾動條部分。
offsetHeight:同理 描述元素外尺寸高度，是指 元素內(nèi)容高度+內(nèi)邊距高度(上下兩個)+邊框(上下兩個)，不包括外邊距和滾動條部分。
clientLeft?clientTop?clientWidth?clientHeight
clientLeft:元素的內(nèi)邊距的外邊緣和邊框的外邊緣的距離，實際就是邊框的左邊框?qū)挾?/p>
clientTop:同理邊框的上邊框的寬度
clientWidth:用于描述元素內(nèi)尺寸寬度，是指 元素內(nèi)容+內(nèi)邊距 大小，不包括邊框、外邊距、滾動條部分
clientHeight:同理 用于描述元素內(nèi)尺寸高度，是指 元素內(nèi)容+內(nèi)邊距 大小，不包括邊框、外邊距、滾動條部分
scrollTop?scrollLeft?scrollWidth?scrollHeight
scrollWidth：內(nèi)容區(qū)域尺寸加上內(nèi)邊距加上溢出尺寸，當(dāng)內(nèi)容正好和內(nèi)容區(qū)域匹配沒有溢出時，這些屬性與clientWidth和clientHeight相等 !important
scrollHeight：同上
scrollTop：滾動條上方卷去的高度
scrollLeft：滾動條左邊卷去的寬度
