拖拽

作者：花生_TL007 | 2024-03-27 20:22:57

踩

拖拽

1.对于div块的position一定要设置，不然的话他根本就移不动，因为它默认的是static，并不能通过style.left来改变其位置。

2.在写onmousemove的时候我没有传进去ev，这样就会报event没有定义的错误。上面的那个时间对象是立即消失了吗？

3.如果给div上面加上onmousemove的时间，那么拖的时候如果鼠标移出去了就没有会出现问题。所以要把它改为document。发现改成了document后不论怎样都不会移出去。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    #div1
    {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }
    </style>
    <script type="text/javascript">
        window.onload = function ()
        {
        var oDiv= document.getElementById('div1');
            var disX = 0;
            var disY =0;
            oDiv.onmousedown = function (ev)
            {
                var oEvent = ev||event;

               disX =  oEvent.clientX-oDiv.offsetLeft;
                disY = oEvent.clientY-oDiv.offsetTop;
                document.onmousemove = function (ev)
                {
                    var oEvent = ev||event;
                    var l = oEvent.clientX-disX;
                    var t = oEvent.clientY-disY;
                    if(l<0)
                    {
                        l = 0;
                    }
                    else if(l>document.documentElement.clientWidth-oDiv.offsetWidth)
                    {
                        l = document.documentElement.clientWidth-oDiv.offsetWidth;
                    }
                    if(t<0)
                    {
                        t=0;
                    }
                    else if(t>document.documentElement.clientHeight-oDiv.offsetHeight)
                    {
                        t = document.documentElement.clientHeight-oDiv.offsetHeight;
                    }
                    oDiv.style.left = l +'px';
                    oDiv.style.top =t +'px';
                };
                document.onmouseup = function ()
                {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };

            }
        }


    </script>
</head>
<body>
<div id="div1"></div>

</body>
</html>

转载于:https://www.cnblogs.com/zhuni/p/4802537.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/326707