JS+DIV實現拖動效果
阿新 • • 發佈:2020-02-12
本文例項為大家分享了JS+DIV實現拖動效果的具體程式碼,供大家參考,具體內容如下
效果圖
思路
程式碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="main" style="background-color: aqua;width: 100px;height: 100px;position: absolute;left: 50px;top: 50px"> <div id="title" style="height: 10px;width:100%;background-color: antiquewhite;position: absolute;left: 0px;top: 0px"></div> <div class="box"></div> </div> <script> var startx; var starty; var startLeft; var startTop; var titleDiv=document.getElementById("title"); var mainDiv=document.getElementById("main"); var isDown=false; // 滑鼠按下 function movedown(e){ e=e?e:window.event; isDown=true; startx=e.clientX; starty=e.clientY; startLeft=parseInt(mainDiv.style.left); startTop=parseInt(mainDiv.style.top); } // 滑鼠移動 function move(e){ e=e?e:window.event; if(isDown) { mainDiv.style.left = e.clientX - (startx - startLeft)+"px"; mainDiv.style.top = e.clientY - (starty - startTop)+"px"; } } // 滑鼠鬆開 function moveup(){ isDown=false; } titleDiv.οnmοusedοwn=movedown; titleDiv.οnmοusemοve=move; titleDiv.οnmοuseup=moveup; </script> </body> </html>
優化(封裝,以及解決拖動問題(事件捕獲))
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="main" style="background-color: aqua;width: 100px;height: 100px;position: absolute;left: 50px;top: 50px"> <div id="title" style="height: 10px;width:100%;background-color: antiquewhite;position: absolute;left: 0px;top: 0px"></div> <div class="box"></div> </div> <script> function Mover(title) { this.obj = title; this.startx = 0; this.starty; this.startLeft; this.startTop; this.mainDiv = title.parentNode; var that = this; this.isDown = false; this.movedown = function (e) { e = e ? e : window.event; if (!window.captureEvents) { this.setCapture(); } //事件捕獲僅支援ie // 函式功能:該函式在屬於當前執行緒的指定窗口裡設定滑鼠捕獲。一旦視窗捕獲了滑鼠, // 所有滑鼠輸入都針對該視窗,無論游標是否在視窗的邊界內。同一時刻只能有一個視窗捕獲滑鼠。 // 如果滑鼠游標在另一個執行緒建立的視窗上,只有當滑鼠鍵按下時系統才將滑鼠輸入指向指定的視窗。 // 非ie瀏覽器 需要在document上設定事件 that.isDown = true; that.startx = e.clientX; that.starty = e.clientY; that.startLeft = parseInt(that.mainDiv.style.left); that.startTop = parseInt(that.mainDiv.style.top); } this.move = function (e) { e = e ? e : window.event; if (that.isDown) { that.mainDiv.style.left = e.clientX - (that.startx - that.startLeft) + "px"; that.mainDiv.style.top = e.clientY - (that.starty - that.startTop) + "px"; } } this.moveup = function () { that.isDown = false; if (!window.captureEvents) { this.releaseCapture(); } //事件捕獲僅支援ie } this.obj.onmousedown = this.movedown; this.obj.onmousemove = this.move; this.obj.onmouseup = this.moveup; //非ie瀏覽器 document.addEventListener("mousemove",this.move,true); } var mover = new Mover(document.getElementById("title")); //寫兩個是為了解決 ie 和非ie 瀏覽器關於事件捕獲 的相容性問題 </script> </body> </html>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。