<!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>
