拖拽的原理： 其實(shí)就是鼠標(biāo)與左上角的距離保持不變。我們來看下圖， 
這紅點(diǎn)就是鼠標(biāo)。
拖拽拖拽實(shí)際上來說就是通過鼠標(biāo)的位置來計(jì)算物體的位置，就是這么簡(jiǎn)單，就是這么任性。 那這個(gè)距離怎么求呢？？
鼠標(biāo)的位置-物體位置的差值就是那個(gè)距離 是吧。那這個(gè)斜線就是橫線和豎線組成的。
我們距離看下程序怎么做。
<div id="div1"> </div>
實(shí)際上他改的就是某個(gè)div 的left top ，那他就動(dòng)起來了。 那樣式中肯定要有絕對(duì)定位是吧。
<style type="text/css"> #div1 { width: 200px; height: 200px; background: red; position: absolute; } </style>這里有幾個(gè)步驟，1. 鼠標(biāo)按下 2. 鼠標(biāo)抬起來 3. 鼠標(biāo)移動(dòng)
<script type="text/javascript"> 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; // 橫向的位置就是鼠標(biāo)的位置-div的位置 disY = oEvent.clientY - oDiv.offsetTop; }; oDiv.onmousemove = function(ev) { var oEvent = ev || event; oDiv.style.left = oEvent.clientX - disX+'px'; // 當(dāng)前鼠標(biāo)的位置-disX oDiv.style.top = oEvent.clientY - disY+'px'; }; }; </script>看圖說話：
var oDivLeft = oEvent.clientX - disX; 圖表示 很清楚吧
mouseup 我們先不加看下現(xiàn)在是什么效果。。
你會(huì)發(fā)現(xiàn)一個(gè)很有意思的現(xiàn)象，我鼠標(biāo)沒有按也會(huì)跟著我走， 這是為什么呢？？？
我們來看看 mousemove： Javascript中沒有人規(guī)定一定是要鼠標(biāo)按下才出發(fā)是吧，不管你鼠標(biāo)按不按下去，這個(gè)mousemove一直在發(fā)生,所以問題就來自于這里。當(dāng)鼠標(biāo)還沒有按下去之前，這個(gè)時(shí)候鼠標(biāo)在上面移動(dòng)應(yīng)該是沒有反應(yīng)的，是要按下去才有反應(yīng)。
所以呢，這個(gè)mousemove不應(yīng)該一上來就添加，而是等到鼠標(biāo)按下去之后再添加mousemove，來看看修改后的代碼。
順便加上mouseup，這時(shí)他的作用就體現(xiàn)出來了 。作用就是oDiv.onmousemove = null; 去掉move事件,
否則當(dāng)你鼠標(biāo)抬起來的時(shí)候 ，物體還是會(huì)跟著你走的。 oDiv.onmouseup = null; 不留垃圾,鼠標(biāo)抬起本來也就沒有用了.
來看看修改后的代碼：
<script type="text/javascript"> 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; // 橫向的位置就是鼠標(biāo)的位置-div的位置 disY = oEvent.clientY - oDiv.offsetTop; oDiv.onmousemove = function(ev) { var oEvent = ev || event; oDiv.style.left = oEvent.clientX - disX+'px'; // 當(dāng)前鼠標(biāo)的位置-disX oDiv.style.top = oEvent.clientY - disY+'px'; }; oDiv.onmouseup = function() { oDiv.onmousemove = null; oDiv.onmouseup = null; // 不留垃圾,鼠標(biāo)抬起本來也就沒有用了 }; }; }; </script>現(xiàn)在我們就做了一個(gè)簡(jiǎn)單的拖拽出來，當(dāng)然這還有一些小問題有待我們?nèi)ソ鉀Q。
但是無論如何，我們已經(jīng)具備一個(gè)拖拽的雛形。 下期我們會(huì)一一解決一些bug。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
