js拖动按钮

迷南。 2021-09-08 15:14 314阅读 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>
            html,body{
                width: 100%;
                height: 100%;
            }
            #moveid {
               width: 50px;height:50px;background-color: aqua;border-radius: 100%;
               position: relative;
            }
        </style>
    </head>
    <body>
        <div id="moveid">
          
        </div>
    
        <script src="./touch_move.js"></script>
    </body>
    </html>

let BodyWidth = document.body.clientWidth;
    let BodyHeight =document.body.offsetHeight;
    let moveId = document.getElementById('moveid');
    console.log(BodyHeight)
    // 初始化位置
    moveId.style.left = BodyWidth - 64+"px";
    moveId.style.top =  14+"px";
    
    
    //  监听移动事件
    moveId.addEventListener('touchmove',touch,false);
    
    function touch(e){
       switch(e.type){
         case "touchmove" :
             let x = e.touches[0].clientX -25;
             let y = e.touches[0].clientY -25;
             e.preventDefault();
                moveId.style.left=x+"px";
                moveId.style.top = y+"px";
                if(x<0){
                    moveId.style.left=0;
                }else if(x>BodyWidth-64){
                    moveId.style.left=BodyWidth-64+"px";
                }
                if(y<0){
                    moveId.style.top=15+"px";
                }else if(y>BodyHeight-64){
                    moveId.style.top=BodyHeight-64+"px";
                }
       }
    }

发表评论取消回复

表情：

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

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

相关阅读

相关案例：按钮拖动移动

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

刺骨的言语ヽ痛彻心扉/ 2023年07月07日 03:47/ 0 赞/ 87 阅读

相关 JS设置拖动功能

设置拖动功能可以提高用户的操作体验，如果使用 `bootstrap` 框架可以参考以下代码： // modal 拖动 $(document).on('mou

一时失言乱红尘/ 2022年10月11日 01:12/ 0 赞/ 173 阅读

相关 JS+DIV 实现拖动效果

效果图思路代码优化封装以及解决拖动问题事件捕获效果图 ![这里写图片描述][201607281930450

待我称王封你为后i/ 2022年09月24日 10:19/ 0 赞/ 224 阅读

相关 JS_无限dome任意拖动

![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5bCP5q2qIHwg5

深藏阁楼爱情的钟/ 2022年09月14日 13:26/ 0 赞/ 228 阅读

相关 js的拖动效果

体验成长的快乐,即使风雨满天............................ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

阳光穿透心脏的1/2处/ 2022年08月14日 03:58/ 0 赞/ 151 阅读

相关 js表格拖动排序

原来从网上找的，使用了一段时间，后来发现还有jquery控件，直接使用了！jquery.tablednd\_0\_5.js 非js库的js表格拖动代码 <

超、凢脫俗/ 2022年08月12日 16:22/ 0 赞/ 216 阅读

相关 js鼠标拖动元素移动

拖动元素移动 var odiv = document.getElementsByTagName('div')[0]; //给需要移动的元

以你之姓@/ 2022年01月28日 00:13/ 0 赞/ 380 阅读

相关 js拖动按钮

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

迷南。/ 2021年09月08日 15:14/ 0 赞/ 315 阅读

相关 js 鼠标拖动div

div中心跟踪鼠标动而动得到鼠标坐标，移动时div的左上距离为鼠标两坐标减去div左上顶点到中心的距离 div任意位置随鼠标动而动得到鼠标第一次坐标，移动时div

忘是亡心i/ 2021年07月24日 17:05/ 0 赞/ 472 阅读

相关 js drag拖动事件

(1)为了让元素可拖动，需要使用 HTML5 draggable 属性!!!important。 (2)链接和图片默认是可拖动的，不需要 draggable 属

淡淡的烟草味﹌/ 2021年07月24日 13:05/ 0 赞/ 418 阅读