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+"}";

})