js在一个div里面移动其子div

最新推荐文章于 2023-06-21 14:42:59 发布

weixin_30315905

最新推荐文章于 2023-06-21 14:42:59 发布

阅读量160

点赞数

原文链接：http://www.cnblogs.com/zhylioooo/p/8257786.html

版权

　　　　　　  var ChildDiv = $("#cid");
            var width = 0;  //鼠标点击子div的地方和子div的左边边距距离
            var height = 0;  //鼠标点击子div的地方和子div的上边边距距离
            ChildDiv.onmousedown = function (ev) //鼠标按下DIV
            {
                var ChildDivEvent = ev || event;   //捕获点击的对象
                width = ChildDivEvent.clientX - ChildDiv.offsetLeft;
                height = ChildDivEvent.clientY - ChildDiv.offsetTop;
                document.onmousemove = function (ev)   //鼠标移动
                {
                    var ChildDivEvent = ev || event;
                    var x = ChildDivEvent.clientX - width;
                    var y = ChildDivEvent.clientY - height;
                    if (x < 0) //当DIV的Left小于0，也就是移出左边
                    {
                        x = 0; //就把DIV的Left设置为0，就不能移出左边
                    } else if (x > $("#pid").width() - ChildDiv.offsetWidth) //DIV不能移出父DIV的右边
                    {
                        x = $("#pid").width() - ChildDiv.offsetWidth;
                    }
                    if (y < 0) //上边
                    {
                        y = 0;
                    } else if (y > $("#pid").height() - ChildDiv.offsetHeight) //下边
                    {
                        y = $("#pid").height() - ChildDiv.offsetHeight;
                    }
                    ChildDiv.style.left = x + 'px'; //DIV的Left设置为新鼠标X坐标减去width的值
                    ChildDiv.style.top = y + 'px'; //DIV的Top设置为新鼠标Y坐标减去height的值
                };
                document.onmouseup = function () //鼠标松开时
                {
                    document.onmousemove = null; //把鼠标移动清除
                    document.onmouseup = null; //把鼠标松开清除
                };
                return false;
            };