<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <title></title> </head> <style> html,body{ width:100%; height:100%; overflow: hidden; } html , body, div{ padding:0; margin:0; } #drag{ width:100px; height:100px; background:pink; -webkit-transform:translate3d(0px,0px,0px); } </style> <body> <div id="drag"></div> <script> function dragMove( obj ){ var oDrag = document.querySelector( obj ) ; //开始 var dragStart = function( event ){ //阻止冒泡行为 event.stopPropagation(); //把当前获取的位置进行处理 var nowLocation = window.getComputedStyle(oDrag , null)['-webkit-transform'].replace(/[a-z()]/g , ''); var nowLocationArr = nowLocation.split(','); //起始值 减去 位置值 等于 当前值 this.startX = event.touches[0].pageX - nowLocationArr[4]; this.startY = event.touches[0].pageY - nowLocationArr[5]; } //移动 var dragMove = function( event ){ //阻止冒泡及默认行为 event.stopPropagation(); event.preventDefault(); if ( event.targetTouches.length == 1 ) { //移动的 x 和 y 值 this.offsetX = event.targetTouches[0].pageX - this.startX; this.offsetY = event.targetTouches[0].pageY - this.startY; //DIV 块活动区域 var clientX = document.body.clientWidth - window.getComputedStyle( this , null )['width'].replace('px',''); var clientY = document.body.clientHeight - window.getComputedStyle( this , null )['height'].replace('px',''); if ( this.offsetX < 0 ) { this.offsetX = 0; }else if ( this.offsetX > clientX ) { this.offsetX = clientX; } if ( this.offsetY < 0 ) { this.offsetY = 0; }else if ( this.offsetY > clientY ) { this.offsetY = clientY; } this.style['-webkit-transform'] = 'translate3d( '+ this.offsetX +'px , '+ this.offsetY +'px , 0px)'; } } //监听事件 oDrag.addEventListener('touchstart' , dragStart ); oDrag.addEventListener('touchmove' , dragMove); } //调用 dragMove('#drag'); </script> </body> </html>