手機端簡單js拖拽效果
阿新 • • 發佈：2019-02-20
網上找了好多js實現拖拽效果的demo，但是這是唯一的一個能夠實現手機端的拖拽效果，至於android、iphone、華為等手機上的app是否能夠正常拖拽，有待測試。先儲存下來：
<!doctype html> <html> <head> <meta charset='utf-8' /> <meta name="viewport" content=" width = device-width , height = device-height , initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable =no, " /> <title></title> </head> <body> <div id="div" style="width:100px;height:100px;background-color:red;position:absolute;"></div> <script> var div = document.getElementById('div'); div.addEventListener('touchmove', function(event) { event.preventDefault();//阻止其他事件 // 如果這個元素的位置內只有一個手指的話 if (event.targetTouches.length == 1) { var touch = event.targetTouches[0]; // 把元素放在手指所在的位置 div.style.left = touch.pageX + 'px'; div.style.top = touch.pageY + 'px'; } }, false); </script> </body> </html>