移动 touch 拖拽

àì夳堔傛蜴生んèń 2023-02-28 15:22 25阅读 0赞

<!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: 50px;
                height: 50px;
                border-radius: 50%;
                position: absolute;
                ;
                background-color: #666;
            }
        </style>
    </head>
    
    <body>
        <div></div>
        <script>
            var div = document.querySelector('div');
            // 按住div 位置
            var x1, y1;
            div.addEventListener('touchstart', function(e) { 
                x1 = e.touches[0].clientX;
                y1 = e.touches[0].clientY;
            });
    
            // 移动坐标
            div.addEventListener('touchmove', function(e) { 
                var x2 = e.touches[0].clientX;
                var y2 = e.touches[0].clientY;
                var x = x2 - x1;
                var y = y2 - y1;
    
                div.style.left = div.offsetLeft + x + 'px';
                div.style.top = div.offsetTop + y + 'px';
    
                x1 = x2; // 每挪动一下 都是后值减去前值，而x1,y1前值一直不变，所以要把后值给前值; 
                y1 = y2;
            })
        </script>
    </body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，25人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS拖拽div（移动）

//获取元素 var dv = document.getElementById('dv'); var x = 0; var y = 0; var l = 0;

素颜马尾好姑娘i/ 2023年06月30日 02:20/ 0 赞/ 191 阅读

相关移动 touch 拖拽

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

àì夳堔傛蜴生んèń/ 2023年02月28日 15:22/ 0 赞/ 26 阅读

相关 html 手机端拖拽效果,JS实现移动端触屏拖拽功能

1.html 2.css \ \{ margin: 0; padding: 0; \} html, body \{ width: 100%; height:

谁借莪１个温暖的怀抱￠/ 2022年10月06日 11:49/ 0 赞/ 484 阅读

相关图片拖拽键盘移动布局

<%@ page language="java" pageEncoding="UTF-8" import="com.XXX.createPortal.recommendPosi

Love The Way You Lie/ 2022年08月06日 05:08/ 0 赞/ 288 阅读

相关 jQuery拖拽移动

jquery sortable 它所有的事件回调函数都有两个参数：event和ui ui.helper - 表示sortable元素的JQuery对象，通常是当前元素的

淡淡的烟草味﹌/ 2022年08月03日 15:52/ 0 赞/ 354 阅读

相关 javascript拖拽盒子移动的实现

原理比较简单，可以参照之前的文章[javascript淘宝主图放大镜功能][javascript]帮助理解。 <!DOCTYPE html> <html>

刺骨的言语ヽ痛彻心扉/ 2022年07月16日 09:07/ 0 赞/ 313 阅读

相关拖拽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

梦里梦外;/ 2022年06月16日 12:47/ 0 赞/ 496 阅读

相关原生js拖拽与吸附(touch+translate+css3)

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />

缺乏、安全感/ 2022年06月13日 09:22/ 0 赞/ 236 阅读

相关 js拖拽div移动

js拖拽div移动,就是鼠标点击住div，根据鼠标的位置来改变div的位置如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必

拼搏现实的明天。/ 2022年05月13日 00:08/ 0 赞/ 437 阅读

相关 pc端移动端拖拽实现

div1 { width: 100px; height: 100px; background: red; positio

曾经终败给现在/ 2021年12月21日 23:47/ 0 赞/ 594 阅读