js鼠标拖拽元素（初学）

最新推荐文章于 2023-11-28 11:58:47 发布

江呱呱

最新推荐文章于 2023-11-28 11:58:47 发布

阅读量201

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/weixin_46500485/article/details/108286362

版权

js 专栏收录该内容

76 篇文章 2 订阅

订阅专栏

js鼠标拖拽元素

//假设想在元素的范围内拖拽元素那么就可以给移动的距离设置限度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: #f00;
        }
    </style>
</head>

<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box');
        box.addEventListener('mousedown', function(e) {
            var firstX = e.clientX;//获得鼠标点击的位置
            var firstY = e.clientY;
            var nowX = box.offsetLeft;//获得div即移动方块的初始位置
            var nowY = box.offsetTop;

            document.onmousemove = function(e) {
            //更改元素的位置：初始的位置 +鼠标的位置-鼠标在元素内的位置
                box.style.left = nowX + e.clientX - firstX + 'px';
                box.style.top = nowY + e.clientY - firstY + 'px';
                console.log(1);
            }
        })
        //当鼠标按键放开的时候   将鼠标移动事件置为空
        box.addEventListener('mouseup', function() {
            document.onmousemove = null
        })
    </script>
</body>

</html>

江呱呱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js鼠标拖拽元素（初学）

js鼠标拖拽元素<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box {
复制链接

扫一扫