JS实现拖拽效果

来源:互联网 发布:中国最新cpi数据2017年 编辑:程序博客网 时间:2024/05/22 12:59
<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>拖拽效果</title><style>#div1 {width:200px; height:200px; background:blue; position:absolute;}</style><script>window.onload=function (){    var oDiv=document.getElementById('div1');    oDiv.onmousedown=function (ev)    {        var oEvent=ev||event;        var disX=oEvent.clientX-oDiv.offsetLeft;        var disY=oEvent.clientY-oDiv.offsetTop;        document.onmousemove=function (ev)        {            var oEvent=ev||event;            oDiv.style.left=oEvent.clientX-disX+'px';            oDiv.style.top=oEvent.clientY-disY+'px';        };        document.onmouseup=function ()        {            document.onmousemove=null;            document.onmouseup=null;        };    };};</script></head><body><div id="div1"></div></body></html>
0 0
原创粉丝点击