js實現鼠標的拖拽效果
阿新 • • 發佈：2017-09-02
郵箱 gin start ott borde mouse ora mar mooc
拖拽效果在我們上網的過程中是很常見的，大家都應該在電腦上面登陸過qq吧，當這個qq的登陸框彈出來的時候，我們是可以進行拖動的。這就是一個拖拽效果
這是我在慕課網上面看到的，我直接拿過來了，地址 http://www.imooc.com/learn/60
這個視頻講的蠻好的，一清二楚，不懂的可以去看看。
首先，理清楚一下總體的思路。
第一步：當鼠標按下彈出框某個區域的時候，可以進行拖拽
第二步：彈出框拖拽進行中
第三部：鼠標松開，彈出框拖動到了某個位置。
先上源代碼。這個是慕課網的老師提供的 。
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>拖拽效果</title> <style type="text/css"> body{background: url(images/baidu_demo.png) #fff top center no-repeat;padding: 0px;margin: 0px;font-size: 12px;font-family: "微軟雅黑";} .link{text-align: right;line-height: 20px;padding-right: 40px;} .ui-dialog{ width: 380px;height: auto;display: none; position: absolute;z-index: 9000; top: 0px;left: 0px; border: 1px solid #D5D5D5;background: #fff; } .ui-dialog a{text-decoration: none;} .ui-dialog-title{ height: 48px;line-height: 48px; padding:0px 20px;color: #535353;font-size: 16px; border-bottom: 1px solid #efefef;background: #f5f5f5; cursor: move; user-select:none; } .ui-dialog-closebutton{ width: 16px;height: 16px;display: block; position: absolute;top: 12px;right: 20px; background: url(images/close_def.png) no-repeat;cursor: pointer; } .ui-dialog-closebutton:hover{background:url(images/close_hov.png);} .ui-dialog-content{ padding: 15px 20px; } .ui-dialog-pt15{ padding-top: 15px; } .ui-dialog-l40{ height: 40px;line-height: 40px; text-align: right; } .ui-dialog-input{ width: 100%;height: 40px; margin: 0px;padding:0px; border: 1px solid #d5d5d5; font-size: 16px;color: #c1c1c1; text-indent: 25px; outline: none; } .ui-dialog-input-username{ background: url(images/input_username.png) no-repeat 2px ; } .ui-dialog-input-password{ background: url(images/input_password.png) no-repeat 2px ; } .ui-dialog-submit{ width: 100%;height: 50px;background: #3b7ae3;border:none;font-size: 16px;color: #fff; outline: none;text-decoration: none; display: block;text-align: center;line-height: 50px; } .ui-dialog-submit:hover{ background: #3f81b0; } .ui-mask{ width: 100%;height:100%;background: #000; position: absolute;top: 0px;height: 0px;z-index: 8000; opacity:0.4; filter: Alpha(opacity=40); } </style> </head> <body > <div class="link"> <a href="javascript:showDialog();">登錄</a> </div> <div class="ui-mask" id="mask" onselectstart="return false"></div> <div class="ui-dialog" id="dialogMove" onselectstart=‘return false;‘> <div class="ui-dialog-title" id="dialogDrag" onselectstart="return false;" > 登錄通行證 <a class="ui-dialog-closebutton" href="javascript:hideDialog();"></a> </div> <div class="ui-dialog-content"> <div class="ui-dialog-l40 ui-dialog-pt15"> <input class="ui-dialog-input ui-dialog-input-username" type="input" value="手機/郵箱/用戶名" /> </div> <div class="ui-dialog-l40 ui-dialog-pt15"> <input class="ui-dialog-input ui-dialog-input-password" type="input" value="密碼" /> </div> <div class="ui-dialog-l40"> <a href="#">忘記密碼</a> </div> <div> <a class="ui-dialog-submit" href="#" >登錄</a> </div> <div class="ui-dialog-l40"> <a href="#">立即註冊</a> </div> </div> </div> <script type="text/javascript"> var dialogInstace , onMoveStartId , mousePos = {x:0,y:0}; // 用於記錄當前可拖拽的對象 // var zIndex = 9000; // 獲取元素對象 function g(id){return document.getElementById(id);} // 自動居中元素（el = Element） function autoCenter( el ){ var bodyW = document.documentElement.clientWidth; var bodyH = document.documentElement.clientHeight; var elW = el.offsetWidth; var elH = el.offsetHeight; el.style.left = (bodyW-elW)/2 + ‘px‘; el.style.top = (bodyH-elH)/2 + ‘px‘; } // 自動擴展元素到全部顯示區域 function fillToBody( el ){ el.style.width = document.documentElement.clientWidth +‘px‘; el.style.height = document.documentElement.clientHeight + ‘px‘; } // Dialog實例化的方法 function Dialog( dragId , moveId ){ var instace = {} ; instace.dragElement = g(dragId); // 允許執行 拖拽操作 的元素 instace.moveElement = g(moveId); // 拖拽操作時，移動的元素 instace.mouseOffsetLeft = 0; // 拖拽操作時，移動元素的起始 X 點 instace.mouseOffsetTop = 0; // 拖拽操作時，移動元素的起始 Y 點 instace.dragElement.addEventListener(‘mousedown‘,function(e){ var e = e || window.event; dialogInstace = instace; instace.mouseOffsetLeft = e.pageX - instace.moveElement.offsetLeft ; instace.mouseOffsetTop = e.pageY - instace.moveElement.offsetTop ; onMoveStartId = setInterval(onMoveStart,10); return false; // instace.moveElement.style.zIndex = zIndex ++; }) return instace; } // 在頁面中偵聽 鼠標彈起事件 document.onmouseup = function(e){ dialogInstace = false; clearInterval(onMoveStartId); } document.onmousemove = function( e ){ var e = window.event || e; mousePos.x = e.clientX; mousePos.y = e.clientY; e.stopPropagation && e.stopPropagation(); e.cancelBubble = true; e = this.originalEvent; e && ( e.preventDefault ? e.preventDefault() : e.returnValue = false ); document.body.style.MozUserSelect = ‘none‘; } function onMoveStart(){ var instace = dialogInstace; if (instace) { var maxX = document.documentElement.clientWidth - instace.moveElement.offsetWidth; var maxY = document.documentElement.clientHeight - instace.moveElement.offsetHeight ; instace.moveElement.style.left = Math.min( Math.max( ( mousePos.x - instace.mouseOffsetLeft) , 0 ) , maxX) + "px"; instace.moveElement.style.top = Math.min( Math.max( ( mousePos.y - instace.mouseOffsetTop ) , 0 ) , maxY) + "px"; } } // 重新調整對話框的位置和遮罩，並且展現 function showDialog(){ g(‘dialogMove‘).style.display = ‘block‘; g(‘mask‘).style.display = ‘block‘; autoCenter( g(‘dialogMove‘) ); fillToBody( g(‘mask‘) ); } // 關閉對話框 function hideDialog(){ g(‘dialogMove‘).style.display = ‘none‘; g(‘mask‘).style.display = ‘none‘; } // 偵聽瀏覽器窗口大小變化 window.onresize = showDialog; Dialog(‘dialogDrag‘,‘dialogMove‘); showDialog(); </script> </body> <js/html>
看看js代碼
1） 獲取元素對象
function g(id){return document.getElementById(id);}
這個很簡單，就是一個對 document.getElementById方法的封裝，用來獲取頁面的元素
2）自動居中元素
function autoCenter( el ){ var bodyW = document.documentElement.clientWidth; var bodyH = document.documentElement.clientHeight; var elW = el.offsetWidth; var elH = el.offsetHeight; el.style.left = (bodyW-elW)/2 + ‘px‘; el.style.top = (bodyH-elH)/2 + ‘px‘; }
這裏有一個document.documentElement.clientWidth 和 el.offsetWidth ，這兩個是什麽寬度？
這裏也有一個視頻。可以去看看，講的蠻仔細的 http://www.imooc.com/learn/608 這個老師的風格有點奇葩，做好心理準備
js實現鼠標的拖拽效果