自定義事件拖拽組件
阿新 • • 發佈：2018-03-29
use def default charset 組件 drag div2 height 行為
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>自定義事件拖拽組件</title> <style> #div1{ width:100px; height:100px; background:red; position:absolute; } #div2 { width:100px; height:100px; background:yellow; position:absolute; left:100px; } #div3 { width:100px; height:100px; background:blue; position:absolute; left:200px; } #div4{ width:100px; height:100px; background:green; position:absolute; left:300px; } </style> </head> <body> <div id="div1"></div> <div id="div2"></div> <div id="div3"></div> <div id="div4"></div> </body> <script> //組件開發 : 多組對象，像兄弟之間的關系( 代碼復用的一種形式 )window.onload = function(){ var d1 = new Drag(); d1.init({ //配置參數 id: ‘div1‘ }); var d2 = new Drag(); d2.init({ //配置參數 id: ‘div2‘ }); bindEvent(d2, ‘toDown‘, function(){ document.title = ‘hello‘; }); bindEvent(d2, ‘toDown‘, function(){ document.body.style.background = ‘black‘; }); var d3 = new Drag(); d3.init({ //配置參數 id: ‘div3‘ }); bindEvent(d3, ‘toDown‘, function(){ document.title = ‘toDown‘; }); bindEvent(d3, ‘toMove‘, function(){ document.title = ‘toMove‘; }); bindEvent(d3, ‘toUp‘, function(){ document.title = ‘toUp‘; }); var d4 = new Drag(); d4.init({ //配置參數 id: ‘div4‘ }); bindEvent(d4, ‘toUp‘, function(){ document.title = ‘byebye‘; }); }; function Drag(){ this.obj = null; this.disX = 0; this.disY = 0; this.settings = { //默認參數 }; }; Drag.prototype.init = function(opt){ var This = this; this.obj = document.getElementById(opt.id); extend( this.settings, opt); this.obj.onmousedown = function(ev) { var ev = ev || window.event; This.fnDown(ev); fireEvent(This , ‘toDown‘); document.onmousemove = function(ev) { var ev = ev || window.event; This.fnMove(ev); fireEvent(This, "toMove"); }; document.onmouseup = function(ev) { var ev = ev || window.event; This.fnUp(); fireEvent(This, ‘toUp‘); }; return false; }; }; Drag.prototype.fnDown = function(ev){ this.disX = ev.clientX - this.obj.offsetLeft; this.disY = ev.clientY - this.obj.offsetTop; }; Drag.prototype.fnMove = function(ev){ this.obj.style.left = ev.clientX - this.disX + ‘px‘; this.obj.style.top = ev.clientY - this.disY + ‘px‘; }; Drag.prototype.fnUp = function(){ document.onmousemove = null; document.onmouseup = null; }; function bindEvent(obj, events, fn){ obj.listeners = obj.listeners || {}; obj.listeners[events] = obj.listeners[events] || []; obj.listeners[events].push(fn); if(obj.nodeType){ if(obj.addEventListener){ obj.addEventListener(events, fn, false); } else{ obj.attachEvent(‘on‘ + events, fn); } } }; function fireEvent(obj,events){ //主動觸發自定義事件 if(obj.listeners && obj.listeners[events]){ for(var i in obj.listeners[events]){ obj.listeners[events][i](); } } }; function extend(child, partent) { var child = child || {}; for(var i in partent) { if(typeof partent[i] === "object") { child[i] = (partent[i].constructor == Array) ? [] : {}; extend(child[i], partent[i]); }else { child[i] = partent[i]; } } }; /*--------------------------- 功能:停止事件冒泡 ---------------------------*/ function stopBubble(e) { //如果提供了事件對象，則這是一個非IE瀏覽器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否則，我們需要使用IE的方式來取消事件冒泡 window.event.cancelBubble = true; }; //阻止瀏覽器的默認行為 function stopDefault(e) { //阻止默認瀏覽器動作(W3C) if ( e && e.preventDefault ) e.preventDefault(); //IE中阻止函數器默認動作的方式 else window.event.returnValue = false; return false; }; </script> </html>
自定義事件拖拽組件