標籤在滑鼠按下後跟隨滑鼠移動,相容低版本IE
阿新 • • 發佈：2019-02-13
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" style="overflow-y: scroll;"> <head> <meta http-equiv="X-UA-Compatible" content="IE=8;" /> <meta charset="utf-8"/> <style type="text/css"> html, body { height: 100%; width: 100%; padding: 0; margin: 0; } .dialog { width: 250px; height: 250px; position: absolute; background-color: #ccc; -webkit-box-shadow: 1px 1px 3px #292929; -moz-box-shadow: 1px 1px 3px #292929; box-shadow: 1px 1px 3px #292929; margin: 10px; } .dialog-title { color: #fff; background-color: #404040; font-size: 12pt; font-weight: bold; padding: 4px 6px; cursor: move; } .dialog-content { padding: 4px; } </style> </head> <body> <div id="dlgTest" class="dialog"> <div class="dialog-title">Dialog</div> <!--<div class="dialog-content"> This is a draggable test. </div>--> </div> <div id="dlgTest1" class="dialog"> <div class="dialog-title">Dialog</div> <!--<div class="dialog-content"> This is a draggable test. </div>--> </div> <div> 這是其他 </div><div> 這是其他 </div><div> 這是其他 </div><div> 這是其他 </div><div> 這是其他 </div> <script type="text/javascript"> // IE8以及以下不支援addEventListener事件，這裡用attachEvent代替。 var Event = { addHandler: function(oElement, sEvent, fnHandler) { if(oElement.addEventListener) { oElement.addEventListener(sEvent, fnHandler, false); } else { oElement.attachEvent("on" + sEvent, fnHandler); } }, removeHandler: function(oElement, sEvent, fnHandler) { oElement.removeEventListener ? oElement.removeEventListener(sEvent, fnHandler, false) : oElement.detachEvent("on" + sEvent, fnHandler) } } var Dragging = function(validateHandler) { //引數為驗證點選區域是否為可移動區域，如果是返回欲移動元素，負責返回null var draggingObj = null; //dragging Dialog var diffX = 0; var diffY = 0; function mouseHandler(e) { switch(e.type) { case 'mousedown': draggingObj = validateHandler(e); //驗證是否為可點選移動區域 if(draggingObj != null) { diffX = e.clientX - draggingObj.offsetLeft; diffY = e.clientY - draggingObj.offsetTop; } break; case 'mousemove': if(draggingObj) { var tempLeft= e.clientX - diffX; if(tempLeft<0 || tempLeft>640){ break; } draggingObj.style.left = tempLeft + 'px'; if(draggingObj.id=='dlgTest'){ console.log('dlgTest') }else{ console.log('dlgTest1') } //draggingObj.style.top = (e.clientY - diffY) + 'px'; } break; case 'mouseup': draggingObj = null; diffX = 0; diffY = 0; break; } }; return { enable: function() { Event.addHandler(document, 'mousedown', mouseHandler); Event.addHandler(document, 'mousemove', mouseHandler); Event.addHandler(document, 'mouseup', mouseHandler); }, disable: function() { Event.removeHandler(document, 'mousedown', mouseHandler); Event.removeHandler(document, 'mousemove', mouseHandler); Event.removeHandler(document, 'mouseup', mouseHandler); } } } /** * 獲取要執行的物件 **/ function getDraggingDialog(e) { // 相容IE8、IE7處理 var event = window.event || e; var target = event.srcElement || event.target; while(target && target.className.indexOf('dialog-title') == -1) { target = target.offsetParent; } if(target != null) { return target.offsetParent; } else { return null; } } Dragging(getDraggingDialog).enable(); </script> </body> </html>