在一个指定的div中拖拽

最新推荐文章于 2022-03-30 21:28:22 发布

weixin_30275415

最新推荐文章于 2022-03-30 21:28:22 发布

阅读量128

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/zhuni/p/4802642.html

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
    #div1
    {
        width: 100px;
        height: 100px;
        background: red;
        position: absolute;
    }
        #div2
        {
            width: 400px;
            height: 300px;
            background: #cccccc;
        }
    </style>
    <script type="text/javascript">
        window.onload = function ()
        {
        var oDiv= document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');
            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<oDiv2.offsetLeft)
                    {
                        l = oDiv2.offsetLeft;
                    }
                    else if(l>oDiv2.offsetWidth-oDiv.offsetWidth+oDiv2.offsetLeft)
                    {
                        l = oDiv2.offsetWidth-oDiv.offsetWidth+oDiv2.offsetLeft;
                    }
                    if(t<oDiv2.offsetTop)
                    {
                        t=oDiv2.offsetTop;
                    }
                    else if(t>oDiv2.offsetHeight-oDiv.offsetHeight+oDiv2.offsetTop)
                    {
                        t =oDiv2.offsetHeight -oDiv.offsetHeight+oDiv2.offsetTop;
                    }
                    oDiv.style.left = l +'px';
                    oDiv.style.top =t +'px';
                };
                document.onmouseup = function ()
                {
                    document.onmousemove = null;
                    document.onmouseup = null;
                };

            }
        }


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

</body>
</html>