移动端拖拽需要通过 ontouchstart，ontouchmove，ontouchend，ontouchcancel（本例中未使用）这四个事件实现。
demo如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动端拖拽</title> <style> * { padding: 0; margin: 0; } .container { margin: auto; height: calc(100vh - 2px); overflow: hidden; border: thin solid #000; position: relative; } .target { 200px; height: 200px; background: lightcoral; position: absolute; } </style> </head> <body> <div class="container"> <div class="target"></div> </div> <script> window.onload = function(){ var maxW = document.documentElement.clientWidth; var maxH = document.documentElement.clientHeight; document.querySelector('.container').style.width = maxW; var target = document.querySelector('.target'); var startX = 0; var startY = 0; target.addEventListener('touchstart', function(e){ startX = e.targetTouches[0].pageX - this.offsetLeft; startY = e.targetTouches[0].pageY - this.offsetTop; }); target.addEventListener('touchmove', function(e){ var leftX = e.targetTouches[0].pageX - startX; var topY = e.targetTouches[0].pageY - startY; var thisW = e.targetTouches[0].target.clientWidth; var parentW = e.targetTouches[0].target.offsetParent.clientWidth; var thisH = e.targetTouches[0].target.clientHeight; var parentH = e.targetTouches[0].target.offsetParent.clientHeight; if(leftX <= 0){ leftX = 0; } if(leftX >= parentW - thisW){ leftX = parentW - thisW; } if(topY <= 0){ topY = 0; } if(topY >= parentH - thisH){ topY = parentH - thisH; } this.style.left = leftX + 'px'; this.style.top = topY + 'px'; this.innerHTML = '我又被揪起来了，真烦人!'; }); target.addEventListener('touchend', function(e){ this.innerHTML = '你终于放弃揪着我了，谢谢!'; }); }; </script> </body> </html>