4. 拖拽

最新推荐文章于 2023-08-23 15:58:44 发布

李天下xue

最新推荐文章于 2023-08-23 15:58:44 发布

阅读量181

点赞数

分类专栏： DOM

本文链接：https://blog.csdn.net/xuehangongzi/article/details/80468410

版权

DOM 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

拖拽，顾名思义，就是小滑块跟着你鼠标走，呈现一种拖拽的赶脚呗，那怎么实现呢（当鼠标在小滑块上面任意地方着落，小滑块即跟着鼠标的移动而移动，鼠标点哪是未知的，当鼠标松开时，小滑块定那不动）

固定语法

鼠标距离左面的距离是e.clientX
- 在鼠标没点小滑块之前，小滑块距离左面的距离是offsetLeft

这样，不论鼠标点哪，你都能知道，鼠标距离小滑块左边的距离disX= e.clientX-offsetLeft

鼠标的位置一直在变，但disX 保持不变了，so，小滑块定位的Left值就是iLeft = e.clientX - disX
同理可求得小滑块定位的Y值 iTop = e.clientY - disY

当时我就在想一个问题，为啥要先求出X，在求定位的left呢，offsetLeft 不就等于left吗，但是就像智障一样，难道你在移动的时候就知道小方块距离屏幕左边的距离了吗？你不得先定位在哪，然后才有offsetLeft 啊

鼠标抬起的时候，让方块不动，也就是清除滑动那个函数，置为null

为啥把oDiv1改成document了呢，因为如果是oDiv1的话，鼠标只有在小滑块上动的时候才跟着鼠标走，一旦鼠标走快了，脱离小滑块了，那小滑块就不动了

so，拖拽的全部代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>拖拽</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #drag{
            width: 400px;
            height: 400px;
            background: #ff0;
            position: absolute;//因为要移动，所以一定不要忘了定位
        }
    </style>
</head>
<body>
    <div id="drag"></div>
    <script>
        var oDrag = document.getElementById("drag");
        oDrag.onmousedown = function(e){
            e = e||window.event;
            var disX = e.clientX -  oDrag.offsetLeft;
            var disY = e.clientY - oDrag.offsetTop;
            document.onmousemove = function(e){
                e = e||window.event;
                var iLeft = e.clientX - disX;
                var iTop = e.clientY - disY;
                oDrag.style.left = iLeft + "px";
                oDrag.style.top = iTop +"px";
            }
            oDrag.onmouseup = function(){
                document.onmousemove = null;
            }
        }
    </script>
</body>
</html>

李天下xue

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
4. 拖拽

拖拽，顾名思义，就是小滑块跟着你鼠标走，呈现一种拖拽的赶脚呗，那怎么实现呢（当鼠标在小滑块上面任意地方着落，小滑块即跟着鼠标的移动而移动，鼠标点哪是未知的，当鼠标松开时，小滑块定那不动）固定语法鼠标距离左面的距离是e.clientX 在鼠标没点小滑块之前，小滑块距离左面的距离是offsetLeft这样，不论鼠标点哪，你都能知道，鼠标距离小滑块左边的距离disX= e.client...
复制链接

扫一扫

专栏目录