拖放的基本概念

• 創(chuàng)建一個絕對定位的元素，使其可以用鼠標(biāo)移動
• 依據(jù)mousemove事件處理，(clientX,clientY)設(shè)置元素相對定位。

基本原理：

var docDIv = document.getElementById("myDiv");
docDIv.addEventListener("mousemove",function(e){
   div.style.left = e.clientX+'px';
   div.style.top = e.clientY+'px'; 
});

基本的拖放界面：

var dragDrop = function(){
    var dragging = null;
    function handleEvent(event){
      //獲取事件和目標(biāo)
       var target  = event.target ? event.target : event.srcElement;
       switch(event.type){
          case "mousedown":
                if(target.className.indexOf("draggable")>-1){
                  dragging = target ;
                }
                break;
          case "mousemove":
                if(dragging !==null){
                //指定位置
               dragging.style.left= event.clientX + "px";
               dragging.style.top= event.clientY + "px";
              }
              break;
          case "mouseup":
              dragging = null;
              break;
        }
   };
  //公共接口
  return {
     enable:function(){
            document.addEventListener("mousedown",handleEvent);
            document.addEventListener("mousemove",handleEvent);
            document.addEventListener("mouseup",handleEvent);
       },     
     disable:function(){
            document.removeEventListener("mousedown",handleEvent);
            document.removeEventListener("mousemove",handleEvent);
            document.removeEventListener("mouseup",handleEvent);
       }   
   }
}

dragDrop封裝了拖放的所有基本功能.
dragDrop有兩個公共方法，enable(),disable(), 他們相應(yīng)的負(fù)責(zé)添加和移除所有的事件處理程序。

<div class="draggable" style="background-color: red;position: absolute;width: 200px;height: 200px;">

注意被拖拽的元素拖動需要兩個條件，判斷的類名class = "draggable", 絕對定位 position: absolute。

拖放界面優(yōu)化

試過上面基本拖拽例子，假如點擊元素中心位置，拖動的時候元素的左上角總是和鼠標(biāo)指針一起。

拖拽.jpg

如果需要保持mousedown(初次點擊元素) 的鼠標(biāo)位置,需要做一次差值計算，如下圖：

元素位置.jpg

var dragDrop = function(){
    var dragging = null,
          diffX = 0,
          diffY = 0;
    function handleEvent(event){
      //獲取事件和目標(biāo)
       var target  = event.target ? event.target : event.srcElement;
       switch(event.type){
          case "mousedown":
                if(target.className.indexOf("draggable")>-1){
                  dragging = target;
                 diffX = event.clientX - target.offsetLeft;
                 diffY = event.clientY - target.offsetTop;
                }
                break;
          case "mousemove":
                if(dragging !==null){
                //指定位置
               dragging.style.left= (event.clientX - diffX) + "px" ;
               dragging.style.top= (event.clientY - diffY) + "px";
              }
              break;
          case "mouseup":
              dragging = null;
              break;
        }
   };
  //公共接口
  return {
     enable:function(){
            document.addEventListener("mousedown",handleEvent);
            document.addEventListener("mousemove",handleEvent);
            document.addEventListener("mouseup",handleEvent);
       },     
     disable:function(){
            document.removeEventListener("mousedown",handleEvent);
            document.removeEventListener("mousemove",handleEvent);
            document.removeEventListener("mouseup",handleEvent);
       }   
   }
}