前端元素拖拽原理

拖放的基本概念

• 创建一个绝对定位的元素，使其可以用鼠标移动
• 依据mousemove事件处理，(clientX,clientY)设置元素相对定位。

基本原理：

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){
      //获取事件和目标
       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(), 他们相应的负责添加和移除所有的事件处理程序。

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

注意被拖拽的元素拖动需要两个条件，判断的类名class = "draggable", 绝对定位 position: absolute。

拖放界面优化

试过上面基本拖拽例子，假如点击元素中心位置，拖动的时候元素的左上角总是和鼠标指针一起。

拖拽.jpg

如果需要保持mousedown(初次点击元素) 的鼠标位置,需要做一次差值计算，如下图：

元素位置.jpg
优化后的代码

var dragDrop = function(){
    var dragging = null,
          diffX = 0,
          diffY = 0;
    function handleEvent(event){
      //获取事件和目标
       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);
       }   
   }
}