zoukankan      html  css  js  c++  java
  • 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     } ();
  • 相关阅读:
    精妙Sql语句
    TSQL是否有循环语句?类似C语言的for?如何查看有哪些用户连接到服务器上?如何强制其退出?
    Tools1.4
    Set Up1.2
    Getting Started1.0
    Start Developing iOS Apps Today1.1
    Language1.5
    Jump Right In1.3
    编译器错误信息: CS0246: 找不到类型或命名空间名称“Discuz”(是否缺少 using 指令或程序集引用?)
    ashx文件无法访问
  • 原文地址:https://www.cnblogs.com/ongoing/p/3086444.html
Copyright © 2011-2022 走看看