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

2018-06-24 01:14:36来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

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

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JavaScript ES6 let、const

下一篇:jQuery实现的全选、反选和不选功能