DOM拖拽效果源码

来源:互联网 发布:windows原版镜像 编辑:程序博客网 时间:2024/06/05 07:27
<!doctype html><html><script type="text/javascript" src="js/sea.js"></script><script type="text/javascript">//引用外部文件时,需要两个参数// seajs.use('./js/module.js',function(explorts){// explorts.foo();// });window.onload = function(){var div = document.getElementById('div');drag(div);function drag(obj){obj.onmousedown = function(e){var that = obj;var e = e||window.event;var clientX = e.clientX;var clientY = e.clientY;var x = clientX-obj.offsetLeft;var y = clientY-obj.offsetTop;// console.log(x+','+y);document.onmousemove = function(e){var e =  e||window.event;that.style.left = e.clientX-x +'px';that.style.top = e.clientY-y +'px';}document.onmouseup = function(e){document.onmousemove = null;document.onmouseup = null;}}}}</script><style type="text/css">#div{width: 200px;height: 300px;position:absolute;top:100px;left: 600px;background-color: red;}</style><head><div id="div"></div></head></html>

0 0