JS案例：物体拖拽

最新推荐文章于 2024-04-24 16:12:04 发布

东方求败、

最新推荐文章于 2024-04-24 16:12:04 发布

阅读量516

点赞数

分类专栏： javascript复习之路 # javascript基础文章标签： javascript

本文链接：https://blog.csdn.net/wang_swa99er/article/details/120201997

版权

javascript复习之路同时被 2 个专栏收录

87 篇文章 1 订阅

订阅专栏

javascript基础

77 篇文章 1 订阅

订阅专栏

物体拖拽

分析：

拖拽:
   mousedown
        var offsetX = e.clientX - node.offsetLeft;
        var offsetY = e.clientY - node.offestTop;
    mousemove
        node.style.left = e.clientX - offsetX + 'px';
        node.style.top = e.clientY - offsetY + 'px';
    mouseup
        取消拖拽

在这里插入图片描述
代码：

<!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>
            #div1{width: 100px;height: 100px;background-color: red;position: absolute;}
        </style>
        <script>
            window.onload = function()
            {
                var oDiv = document.getElementById("div1");
                limitDrag(oDiv);
            
            }

            function limitDrag(node){
                node.onmousedown = function(ev){
                    var e = ev || window.event;
                    //记录鼠标和拖拽物相对位置
                    var offsetX = e.clientX - node.offsetLeft;
                    var offsetY = e.clientY - node.offsetTop; 

                    document.onmousemove = function(ev){
                    var e = ev || window.event;
                    //被拖拽物体保持相对距离和鼠标移动
                    var l = e.clientX - offsetX;
                    var t = e.clientY - offsetY;
                    //限制出界
                    //左边
                    if(l <= 0)
                    {
                        l = 0;
                    }
                    //顶部
                    if(t <= 0)
                    {
                        t = 0;
                    }
                    //右侧
                    var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
                    if(l >= windowWidth - node.offsetWidth)
                    {
                        l = windowWidth - node.offsetWidth; 
                    }
                    //底部
                    var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                    if(t >= windowHeight - node.offsetHeight)
                    {
                        t = windowHeight - node.offsetHeight;
                    }
                    node.style.left = l + 'px';
                    node.style.top = t + 'px';
                    }
                }

                //取消拖拽
                document.onmouseup = function()
                {
                    document.onmousemove = null;
                }
            }
        </script>
    </head>
    <body>
        <div id = "div1"></div>
    </body>
</html>

实现效果：

相关知识：
offset系列方法
 鼠标事件对象的属性
 JS获取当前窗口的宽和高

东方求败、

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS案例：物体拖拽

物体拖拽分析：拖拽: mousedown var offsetX = e.clientX - node.offsetLeft; var offsetY = e.clientY - node.offestTop; mousemove node.style.left = e.clientX - offsetX + 'px'; node.style.top = e.clientY - offsetY + 'px'; mous
复制链接

扫一扫