首頁 > 開發者 > JavaScript
文章轉載自：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>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
