JavaScript DIV拖拽

来源：互联网发布：南昌淘宝摄影招聘编辑：程序博客网时间：2024/06/04 23:30

简易拖拽
拖拽原理
距离不变
三个事件
靠谱拖拽
原有拖拽的问题
直接给document加事件
FF下，空Div拖拽Bug
阻止默认事件
防止拖出页面
修正位置

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><style>#div1 {width:100px; height:100px; background:red; position:absolute;}</style><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><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;        document.onmousemove=function (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';        };        document.onmouseup=function ()        {            document.onmousemove=null;            document.onmouseup=null;        };        return false;    };};</script></head><body><div id="div1"></div></body></html>

参考：JavaScript

阅读全文

0 0