拖动盒子案例

最新推荐文章于 2024-03-10 22:45:15 发布

旺仔奶牛

最新推荐文章于 2024-03-10 22:45:15 发布

阅读量125

点赞数

文章标签： js

本文链接：https://blog.csdn.net/LIKD_DIKL/article/details/111167857

版权

拖动盒子案例

<html lang="en"> 
<head>
    <meta charset="UTF-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Document</title> 
    <style> 
    * { 
        margin: 0; 
        padding: 0; 
    }
    .box {
        position: relative; 
        width: 200px; 
        height: 150px; 
        background-color: pink;
        margin-left: 100px; 
    } 
    </style> 
</head> 
<body>
    <div class="box"> </div> 
    <script> 
   var box=document.querySelector('.box') 
   box.addEventListener('mousedown', function (event) { 
    var left=this.offsetLeft
    var top=this.offsetTop 
    var old_x = event.pageX 
    var old_y=event.pageY 
    document.addEventListener('mousemove', move) 
    function move(event) { 
        var new_x = event.pageX 
        var new_y=event.pageY 
        var x=new_x-old_x 
        var y=new_y-old_y 
        box.style.left=left+x+'px' 
        box.style.top=top+y+'px' 
    }
        document.addEventListener('mouseup', function () { 
            document.removeEventListener('mousemove', move) 
            }) 
        }) 
    </script> 
</body> 
</html>

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

旺仔奶牛

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
拖动盒子案例

拖动盒子案例<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0;
复制链接

扫一扫