JavaScript—拖拽

最新推荐文章于 2023-11-22 17:35:41 发布

九阈

最新推荐文章于 2023-11-22 17:35:41 发布

阅读量160

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46048542/article/details/122896588

版权

JavaScript 专栏收录该内容

41 篇文章 0 订阅

订阅专栏

        拖拽:(拖拽的三剑客)
        mousedown
        记录鼠标按下位置和被拖拽物体相对距离
        var offsetX = e.clientX - node.offsetLeft;
        var offsetY = e.clientY - node.offsetTop;
        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 http-equiv="X-UA-Compatible" content="IE=edge">
    <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");
            drag(oDiv);
        }
        function drag(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;
                    node.style.left = e.clientX - offsetX + 'px';
                    node.style.top = e.clientY - offsetY + 'px';
                }
            }
            //取消拖拽
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
    </script>
</head>
<body>
    <div id="div1"></div>
</body>
</html>

上面拖拽是可以出界的
下面进行限制

       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;
                    }
                    var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
                    if(l >= windowWidth - node.offsetWidth){
                        l = windowWidth - node.offsetWidth;
                    }

                    if(t <= 0){
                        t = 0;
                    }
                    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;
            }
        }

九阈

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript—拖拽

拖拽:(拖拽的三剑客) mousedown 记录鼠标按下位置和被拖拽物体相对距离 var offsetX = e.clientX - node.offsetLeft; var offsetY = e.clientY - node.offsetTop; mousemove 一致距离，相对距离 node.style.left = e.clientX - offsetX + 'px';...
复制链接

扫一扫