JS实现简单移动端鼠标拖拽
渴望 Long For 人气:0本文着重为大家仔细讲解了JS实现简单移动端鼠标拖拽,文中代码实例讲解的非常细致,希望能够帮助到您,欢迎大家阅读和收藏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> #div { width: 100%; height: 200px; background: rosybrown; } #button { position: absolute; } </style> </head> <body> <div id="div"> <button id="button">看我的魔法屌不屌</button> </div> <script> var button = document.getElementById('button') button.ontouchstart = function(e) { var startX = e.touches[0].clientX - this.offsetLeft; var startY = e.touches[0].clientY - this.offsetTop; this.ontouchmove = function(e) { button.style.left = e.touches[0].clientX - startX + 'px'; button.style.top = e.touches[0].clientY - startY + 'px'; } } button.ontouchend = function() { button.ontouchmove = null; } </script> </body> </html>
更多精彩文章请点击专题: Javascript拖拽特效汇总
加载全部内容