dragdrop + 自定义事件
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> 5 <title>dragdrop</title> 6 <script type="text/javascript" src="eventutil.js"></script> 7 <script type="text/javascript" src="prototypeevent.js"></script> 8 <script type="text/javascript" src="dragdrop.js"></script> 9 </head> 10 <body> 11 <div id="dragbox" class="draggable" style="width:100px;height:100px;background:#000000;position:absolute;"></div> 12 <div id="status"></div> 13 </body> 14 </html>
eventutil.js
1 var EventUtil = { 2 addHandler: function(element, type, handler) { 3 if (element.addEventListener) { 4 element.addEventListener(type, handler, false); 5 } else if (element.attachEvent) { 6 element.attachEvent("on" + type, handler); 7 } else { 8 element["on" + type] = handler; 9 } 10 }, 11 getEvent: function(event) { 12 return event ? event : window.event; 13 }, 14 getTarget: function(event) { 15 return event.target || event.srcElement; 16 }, 17 getRelatedTarget: function(event) { 18 if (event.relatedTarget) { 19 return event.relatedTarget; 20 } else if (event.toElement) { 21 return event.toElement; 22 } else if (event.fromElement) { 23 return event.fromElement; 24 } else { 25 return null; 26 } 27 }, 28 getButton: function(event) { 29 if (document.implementation.hasFeature("MouseEvents", "2.0")) { 30 return event.button; 31 } else { 32 switch (event.button) { 33 case 0: 34 case 1: 35 case 3: 36 case 5: 37 case 7: 38 return 0; 39 case 2: 40 case 6: 41 return 2; 42 case 4: 43 return 1; 44 } 45 } 46 }, 47 getCharCode: function(event) { 48 if (typeof event.charCode == "number") { 49 return event.charCode; 50 } else { 51 return event.keyCode; 52 } 53 }, 54 getWheelDelta: function(event) { 55 if (event.wheelDelta) { 56 return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta); 57 } else { 58 return -event.detail * 40; 59 } 60 }, 61 getClipboardText: function(event) { 62 var clipboardData = (event.clipboardData || window.clipboardData); 63 return clipboardData.getData("text"); 64 }, 65 setClipboardText: function(event, value) { 66 if (event.clipboardData) { 67 return event.clipboardData.setData("text/plain", value); 68 } else if (window.clipboardData) { 69 return window.clipboardData.setData("text", value); 70 } 71 }, 72 preventDefault: function(event) { 73 if (event.preventDefault) { 74 event.preventDefault(); 75 } else { 76 event.returnValue = false; 77 } 78 }, 79 removeHandler: function(element, type, handler) { 80 if (element.removeEventListener) { 81 element.removeEventListener(type, handler, false); 82 } else if (element.detachEvent) { 83 element.detachEvent("on" + type, handler); 84 } else { 85 element["on" + type] = null; 86 } 87 }, 88 stopPropagation: function(event) { 89 if (event.stopPropagation) { 90 event.stopPropagation(); 91 } else { 92 event.cancelBubble = true; 93 } 94 } 95 };
prototypeevent.js
1 function EventTarget() { 2 this.handlers = {}; 3 } 4 EventTarget.prototype = { 5 constructor: EventTarget, 6 //注册 7 addHandler: function(type, handler) { 8 if (typeof this.handlers[type] == "undefined") { 9 this.handlers[type] = []; 10 } 11 this.handlers[type].push(handler); 12 }, 13 //触发 14 fire: function(event) { 15 if (!event.target) { 16 event.target = this; 17 } 18 if (this.handlers[event.type] instanceof Array) { 19 var handlers = this.handlers[event.type]; 20 for (var i = 0, len = handlers.length; i < len; i++) { 21 handlers[i](event); 22 } 23 } 24 }, 25 //注销 26 removeHandler: function(type, handler) { 27 if (this.handlers[type] instanceof Array) { 28 var handlers = this.handlers[type]; 29 for (var i = 0, len = handlers.length; i < len; i++) { 30 if (handlers[i] === handler) { 31 break; 32 } 33 } 34 handlers.splice(i, 1); 35 } 36 } 37 };
dragdrop.js
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 event = EventUtil.getEvent(event); 11 var target = EventUtil.getTarget(event); 12 13 //确定事件类型 14 switch (event.type) { 15 case "mousedown": 16 if (target.className.indexOf("draggable") > -1) { 17 dragging = target; 18 //鼠标在element内的坐标 19 diffX = event.clientX - target.offsetLeft; 20 /* 21 console.log("鼠标在元素内的坐标: " + diffX); 22 console.log("鼠标坐标: " + event.clientX); 23 console.log("element坐标: " + target.offsetLeft); 24 console.log("------------------------------"); 25 */ 26 diffY = event.clientY - target.offsetTop; 27 dragdrop.fire({ 28 type: "dragstart", 29 target: dragging, 30 x: event.clientX, 31 y: event.clientY 32 }); 33 } 34 break; 35 36 case "mousemove": 37 if (dragging !== null) { 38 //获取事件 39 event = EventUtil.getEvent(event); 40 41 //指定位置 42 dragging.style.left = (event.clientX - diffX) + "px"; 43 dragging.style.top = (event.clientY - diffY) + "px"; 44 45 //触发自定义事件 46 dragdrop.fire({ 47 type: "drag", 48 target: dragging, 49 x: event.clientX, 50 y: event.clientY 51 }); 52 } 53 break; 54 55 case "mouseup": 56 dragdrop.fire({ 57 type: "dragend", 58 target: dragging, 59 x: event.clientX, 60 y: event.clientY 61 }); 62 dragging = null; 63 break; 64 } 65 }; 66 67 //公共接口 68 dragdrop.enable = function() { 69 EventUtil.addHandler(document, "mousedown", handleEvent); 70 EventUtil.addHandler(document, "mousemove", handleEvent); 71 EventUtil.addHandler(document, "mouseup", handleEvent); 72 }; 73 dragdrop.disable = function() { 74 EventUtil.removeHandler(document, "mousedown", handleEvent); 75 EventUtil.removeHandler(document, "mousemove", handleEvent); 76 EventUtil.removeHandler(document, "mouseup", handleEvent); 77 }; 78 return dragdrop; 79 }(); 80 81 DragDrop.addHandler("dragstart", function(event) { 82 var status = document.getElementById("status"); 83 status.innerHTML = "Started dragging " + event.target.id; 84 }); 85 86 DragDrop.addHandler("drag", function(event) { 87 var status = document.getElementById("status"); 88 status.innerHTML += " <br/> Dragged " + event.target.id + " to (" + event.x + "," + event.y + ")"; 89 }); 90 91 DragDrop.addHandler("dragend", function(event) { 92 var status = document.getElementById("status"); 93 status.innerHTML += "<br/> Dragged " + event.target.id + " at (" + event.x + "," + event.y + ")"; 94 }); 95 96 DragDrop.enable();