JavaScript实现div拖拽吸附效果

来源：互联网发布：杜冷丁多少钱一只淘宝编辑：程序博客网时间：2024/05/23 14:22

JavaScript学习记录

利用JavaScript实现拖拽吸附效果

<!doctype html><html><head><meta charset="UTF-8"><title>拖拽</title><style>#div1 {    width: 100px;    height: 100px;    background: red;    position: absolute;}</style><script>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;        /*处理浏览器兼容问题*/        if(oDiv.setCapture)        {            oDiv.onmousemove=mouseMove;            oDiv.onmouseup=mouseUp;            oDiv.setCapture();        }        else        {            document.onmousemove=mouseMove;            document.onmouseup=mouseUp;        }        function mouseMove(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';          }        function mouseUp()        {            this.onmousemove=null;            this.onmouseup=null;            if(this.releaseCapture)            {                this.releaseCapture();            }        }        return false;        };};</script></head><body><div id="div1"></div></body></html>

阅读全文

0 0