<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>触摸</title> <style type="text/css"> #box { width: 200px; height: 200px; background: orangered; position: absolute; left: 0; top: 0; } </style> </head> <body> <div id="box"> </div> </body> <script src="hammer.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var oBox = document.getElementById("box"); //创建实例 var hammer = new Hammer(oBox); hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL }); hammer.on("panstart", function(event) { var left = oBox.offsetLeft; var tp = oBox.offsetTop; hammer.on("panmove", function(event) { oBox.style.left = left + event.deltaX + 'px'; oBox.style.top = tp + event.deltaY + 'px'; }); }) </script> </html>