js实现鼠标拖拽盒子

最新推荐文章于 2024-11-13 17:27:29 发布

清酒独酌

最新推荐文章于 2024-11-13 17:27:29 发布

阅读量354

点赞数

分类专栏： javascript 文章标签： JavaScript DOM操作鼠标事件元素定位拖拽效果

本文链接：https://blog.csdn.net/yang68668/article/details/121215772

版权

javascript 专栏收录该内容

57 篇文章 4 订阅

订阅专栏

 <style>
        #box {
            width: 50px;
            height: 50px;
            background-color: #e74c3c;
            position: absolute;
        }

    </style>
</head>

<body>
    <!-- 定义一个盒子 -->
        <div id="box"></div>
    <script>
        /* 获取box的节点元素 */
        var box = document.getElementById('box')
            /* 获取父盒子 */
        var plus_box = document.getElementById('plus_box');
        /* 定义一个变量 */
        var flag = false;
        /* 定义两个值，保存鼠标按下时初始值 */
        var p_left = 0,
            p_top = 0;
        /* 绑定鼠标按下 */
        box.onmousedown = function(e) {
                flag = true
                    /* 定义两个值，保存鼠标按下时位置 */
                p_left = e.offsetX;
                p_top = e.offsetY;
            }
            /* 鼠标抬起 */
        box.onmouseup = function() {
                flag = false
            }
            /*    var pl = plus_box.offsetLeft
               var pt = plus_box.offsetTop */
            /* 鼠标移动 */
        document.onmousemove = function(e) {
            if (!flag) {
                return;
            }
            /* 求坐标点 */
            var x = e.pageX - p_left;
            var y = e.pageY - p_top;
            /* 将坐标赋值给盒子 */
            box.style.left = x + 'px';
            box.style.top = y + 'px';
           
        }
    </script>
</body>