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

        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;
            };

 

posted @ 2018-01-10 11:50  zhyemmmm  阅读(2205)  评论(0编辑  收藏  举报