DragDrop 拖拽示例

 1.封装兼容事件对象EventUtil

///**************** 封装 EventUtil对象 ***************/
var EU={//EventUtil

  addHandler:function(element,type,handler){ //添加事件
    if(element.addEventListener){
      element.addEventListener(type,handler,false);  //使用DOM2级方法添加事件
    }else if(element.attachEvent){                    //使用IE方法添加事件
      element.attachEvent("on"+type,handler);
    }else{
      element["on"+type]=handler;          //使用DOM0级方法添加事件
    }
  },

  removeHandler:function(element,type,handler){  //取消事件
    if(element.removeEventListener){
      element.removeEventListener(type,handler,false);
    }else if(element.detachEvent){
      element.detachEvent("on"+type,handler);
    }else{
      element["on"+type]=null;
    }
  },

  getEvent:function(event){  //使用这个方法跨浏览器取得event对象
    return event?event:window.event;
  },

//IE浏览器支持window.event.srcElement ， 而firefox支持window.event.target；
// event.srcElement从字面上可以看出来有以下关键字：事件,源 他的意思就是：当前事件的源，
// 我们可以调用他的各种属性 就像:document.getElementById("")这样的功能，
  getTarget:function(event){  //返回事件的实际目标
    return event.target||event.srcElement;
  },

  preventDefault:function(event){   //阻止事件的默认行为
    if(event.preventDefault){
      event.preventDefault();
    }else{
      event.returnValue=false;
    }
  },

  stopPropagation:function(event){  //立即停止事件在DOM中的传播
    //避免触发注册在document.body上面的事件处理程序
    if(event.stopPropagation){
      event.stopPropagation();
    }else{
      event.cancelBubble=true;
    }
  },

  getRelatedTarget:function(event){  //获取mouseover和mouseout相关元素
    if(event.relatedTarget){
      return event.relatedTarget;
    }else if(event.toElement){      //兼容IE8-
      return event.toElement;
    }else if(event.formElement){
      return event.formElement;
    }else{
      return null;
    }
  },

  getButton:function(event){    //获取mousedown或mouseup按下或释放的按钮是鼠标中的哪一个
    if(document.implementation.hasFeature("MouseEvents","2.0")){
      return event.button;
    }else{
      switch(event.button){   //将IE模型下的button属性映射为DOM模型下的button属性
        case 0:
        case 1:
        case 3:
        case 5:
        case 7:
          return 0;  //按下的是鼠标主按钮（一般是左键）
        case 2:
        case 6:
          return 2;  //按下的是中间的鼠标按钮
        case 4:
          return 1;  //鼠标次按钮（一般是右键）
      }
    }
  },

  getWheelDelta:function(event){ //获取表示鼠标滚轮滚动方向的数值
    if(event.wheelDelta){
      return event.wheelDelta;
    }else{
      return -event.detail*40;
    }
  },

  getCharCode:function(event){   //以跨浏览器取得相同的字符编码，需在keypress事件中使用
    if(typeof event.charCode=="number"){
      return event.charCode;
    }else{
      return event.keyCode;
    }
  }
};

2.HTML codes

<p id="status">coordinate:</p>

<div id="myDiv" class="mydiv draggable" style="position:absolute;top:0;left:0;"></div>

3.js codes

//模块模式的单例
var DragDrop = function(){//DragDrop = dragdrop
      var dragdrop  = new EventTarget();

      var dragging = null;
      var diffX = 0,diffY = 0;
      function handleEvent(event){
        event = EU.getEvent(event);//兼容event
        var target = EU.getTarget(event);//target 目标

        //确定事件类型
        switch(event.type){
          case 'mousedown':
            if(target.className.indexOf("draggable") > -1){
              dragging = target;
              diffX = event.clientX - target.offsetLeft;
              diffY = event.clientY - target.offsetTop;
              dragdrop.fire({type:'dragstart',target:dragging,x:event.clientX,y:event.clientY});
            }
            break;
          case 'mousemove':
            if(dragging !== null){
              //指定位置
              dragging.style.left = (event.clientX - diffX) + 'px';
              dragging.style.top = (event.clientY - diffY) + 'px';
              //触发自定义事件
              dragdrop.fire({type:'drag',target:dragging,x:event.clientX,y:event.clientY});
            }
            break;
          case 'mouseup':
            dragdrop.fire({type:'dragend',target:dragging,x:event.clientX,y:event.clientY});
            dragging = null;
            break;
          default:
            break;
        }
      }

      //公共接口

        dragdrop.enable = function(){
          EU.addHandler(document,'mousedown',handleEvent);
          EU.addHandler(document,'mousemove',handleEvent);
          EU.addHandler(document,'mouseup',handleEvent);
        };
        dragdrop.disable = function(){
          EU.removeHandler(document,'mousedown',handleEvent);
          EU.removeHandler(document,'mousemove',handleEvent);
          EU.removeHandler(document,'mouseup',handleEvent);
        }
        return dragdrop;
}();


DragDrop.addHandler('dragstart',function(event){
  var status = document.getElementById("status");
  status.innerHTML = 'started dragging' + event.target.id;
})

DragDrop.addHandler('drag',function(event){
  var status = document.getElementById('status');
  status.innerHTML += "<br /> Dragged " + event.target.id + "to{"+event.x+","+event.y+"}";

})

DragDrop.addHandler('dragend',function(event){
  var status = document.getElementById('status');
  status.innerHTML += "<br /> Dragged " + event.target.id + "to{"+event.x+","+event.y+"}";

})

转载于:https://www.cnblogs.com/tangchangcai/p/7756483.html