custom event and dragdrop solution in javascript

//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     } ();

 

posted on 2013-05-19 01:22  雷音  阅读(179)  评论(0)  编辑  收藏  举报

导航