手机端简单js拖拽效果

来源：互联网发布：无人机遥控软件编辑：程序博客网时间：2024/06/14 18:37

网上找了好多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>

阅读全文

0 0