//custom event
1 function EventTarget() { 2 this.handlers = {}; 3 } 4 EventTarget.prototype = { 5 constructor: EventTarget, 6 addHandler: function (type, handler) { 7 if (typeof this.handlers[type] == "undefined") { 8 this.handlers[type] = []; 9 } 10 this.handlers[type].push(handler); 11 }, 12 13 fire: function (event) { 14 if (!event.target) { 15 event.target = this; 16 } 17 if (this.handlers[event.type] instanceof Array) { 18 var handlers = this.handlers[event.type]; 19 for (var i = 0, len = handlers.length; i < len; i++) { 20 handlers[i](event); 21 } 22 } 23 }, 24 25 removeHandler: function (type, handler) { 26 if (this.handlers[type] instanceof Array) { 27 var handlers = this.handlers[type]; 28 for (var i = 0, len = handlers.length; i < len; i++) { 29 if (handlers[i] === handler) { 30 break; 31 } 32 } 33 34 handlers.splice(i, 1); 35 } 36 } 37 };
//DragDrop solution
1 var DragDrop = function () { 2 3 var dragdrop = new EventTarget(); 4 var dragging = null; 5 var diffX = 0; 6 var diffY = 0; 7 8 function handleEvent(event) { 9 10 //get event and object 11 event = EventUtil.getEvent(event); 12 var target = EventUtil.getTarget(event); 13 14 //confirm event type 15 switch (event.type) { 16 case "mousedown": 17 if (target.className.indexOf("draggable") > -1) { 18 dragging = target; 19 diffX = event.clientX - target.offsetLeft; 20 diffY = event.clientY - target.offsetTop; 21 dragdrop.fire({ type: "dragstart", target: dragging, x: event.clientX, y: event.clientY }); 22 } 23 break; 24 case "mousemove": 25 if (dragging !== null) { 26 27 //get event 28 event = EventUtil.getEvent(event); 29 30 //get position 31 dragging.style.left = (event.clientX - diffX) + "px"; 32 dragging.style.top = (event.clientY - diffY) + "px"; 33 34 //raise customized event 35 dragdrop.fire({ type: "dragstart", target: dragging, x: event.clientX, y: event.clientY }); 36 } 37 break; 38 39 case "mouseup": 40 dragdrop.fire({ type: "dragstart", target: dragging, x: event.clientX, y: event.clientY }); 41 dragging = null; 42 break; 43 } 44 }; 45 46 //public interface 47 dragdrop.enable = function () { 48 EventUtil.addHandler(document, "mousedown", handleEvent); 49 EventUtil.addHandler(document, "mousemove", handleEvent); 50 EventUtil.addHandler(document, "mouseup", handleEvent); 51 }; 52 53 dragdrop.disable = function () { 54 EventUtil.removeHandler(document, "mousedown", handleEvent); 55 EventUtil.removeHandler(document, "mousemove", handleEvent); 56 EventUtil.removeHandler(document, "mouseup", handleEvent); 57 }; 58 59 return dragdrop; 60 } ();