您好,登錄后才能下訂單哦!
今天小編給大家分享一下怎么使用JavaScript實(shí)現(xiàn)拖拽效果的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
拖拽在前端開(kāi)發(fā)中是很常見(jiàn)的功能,也是基本功之一,本文是不限制范圍的拖拽也就是最簡(jiǎn)單的拖拽,鼠標(biāo)按下對(duì)象,拖拽,松開(kāi)停止!
1,onmousedown事件
2,onmousemove事件
3,onmouseup事件
因?yàn)樵诎聪聲r(shí)拖動(dòng),所以onmousemove事件在down后才注冊(cè),up事件是用來(lái)解綁事件,消除事件!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>簡(jiǎn)單拖拽</title> <style type="text/css"> * { margin: 0; padding: 0; } #div1 { width: 100px; height: 100px; background: orange; position: absolute; } </style> </head> <body > <div id="div1"></div> <script type="text/javascript"> function getStyle(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, null)[attr]; } } 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; var disX = oEvent.clientX - parseInt(getStyle(oDiv, 'left')); var disY = oEvent.clientY - parseInt(getStyle(oDiv, 'top')); 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; }; return false; }; </script> </body> </html>
以上就是“怎么使用JavaScript實(shí)現(xiàn)拖拽效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。