登 录
文章转载自：http://blog.csdn.net/sunxing007/archive/2009/04/22/4100840.aspx，由笑的自然最后编辑
效果预览：
实现源代码：<html><br /> <head><br /> <title>Drag[笑的自然最后修改编辑]</title><br /> </head><br /> <body><br /> <a href="http://blog.csdn.net/xxd851116" mce_href="http://blog.csdn.net/xxd851116">笑的自然最后修改编辑</a><br /> <div id="r" style="position:absolute; left:100px; top:100px; background-color:#F00; height:80px; width:80px; cursor: pointer;"></div><br /> <div id="g" style="position:absolute; left:250px; top:100px; background-color:#0F0; height:80px; width:80px; cursor: pointer;"></div><br /> <div id="b" style="position:absolute; left:400px; top:100px; background-color:#00F; height:80px; width:80px; cursor: pointer;"></div><br /> <mce:script type="text/javascript"><!--<br /> var Drag = {<br /> //当前被drag的对象<br /> obj: null,<br /> //初始化<br /> init: function(id){<br /> var o = document.getElementById(id);<br /> //当onmousedown开始拖拽<br /> o.onmousedown = Drag.start;<br /> },<br /> start: function(e){<br /> var o = Drag.obj = this;<br /> //lastMouseX，lastMouseY记录上次鼠标的位置<br /> o.lastMouseX = Drag.getEvent(e).x;<br /> o.lastMouseY = Drag.getEvent(e).y;<br /> //当onmousemove开始移动<br /> document.onmousemove = Drag.move;<br /> //当onmouseup终止拖拽<br /> document.onmouseup = Drag.end;<br /> },<br /> move: function(e){<br /> var o = Drag.obj;<br /> //dx, dy表示鼠标移动的距离<br /> var dx = Drag.getEvent(e).x - o.lastMouseX;<br /> var dy = Drag.getEvent(e).y - o.lastMouseY;<br /> //因为element.style.left通常返回的结果是'200px'的形式，所以要用parseInt转化<br /> var left = parseInt(o.style.left) + dx ;<br /> var top = parseInt(o.style.top) + dy;<br /> o.style.left = left;<br /> o.style.top = top;<br /> o.lastMouseX = Drag.getEvent(e).x;<br /> o.lastMouseY = Drag.getEvent(e).y;<br /> },<br /> end: function(e){<br /> document.onmousemove = null;<br /> document.onMouseup = null;<br /> Drag.obj = null;<br /> },<br /> //辅助函数，处理IE和FF不同的event模型<br /> getEvent: function(e){<br /> if (typeof e == 'undefined'){<br /> e = window.event;<br /> }<br /> //alert(e.x?e.x : e.layerX);<br /> if(typeof e.x == 'undefined'){<br /> ee.x = e.layerX;//复制了n遍，到了csdn就变成ee.x了<br /> }<br /> if(typeof e.y == 'undefined'){<br /> ee.y = e.layerY;//复制了n遍，到了csdn就变成ee.x了<br /> }<br /> return e;<br /> }<br /> };</p> <p>//测试代码开始，使三个div具有drag and drop的能力。<br /> Drag.init('r');<br /> Drag.init('g');<br /> Drag.init('b');<br /> // --></mce:script><br /> </body><br /> </html>
抱歉!评论已关闭.