html & js 实现拖动效果

前言

在日常开发中，前端中常会使用到拖动的效果，今天就来好好的讲解一下，使用javascript和html实现拖动的效果。

需求分析

要实现的效果很简单，如下图中，我们在蓝色区域内拖动可以使得整个灰色和蓝色的也一起拖动，而在灰色的界面内是无法实现拖动的。

javascript

样式很简单，就不多说。
其中的蓝色部分的id是top，而灰色部分的id是main。

window.onload=function(){
var main = document.getElementById('main');
// 拖动
var top = document.getElementById('top');
// 设置点击
top.onmousedown = function(event){  
      fndown(event,main);
    }
}

上面部分很简单，首先取到蓝色部分的元素，和主要的元素，为top元素设置鼠标点击事件。点击后调用以下函数：

function fndown(event,main){
         event = event || window.event;
         var disX = event.clientX - main.offsetLeft,
         disY = event.clientY - main.offsetTop;
         document.onmousemove = function(event){
             event = event || window.event;
             fnMove(event,disX,disY,main);
         }
         top.onmouseup = function(){
             document.onmousemove = null;
             top.onmouseup = null;
         }
}

在这个函数内，我们首先获取到当前的鼠标位置和main元素相距上左两面的距离，计算得出鼠标在元素内距离元素上左两端的距离。
注意这里的拖动事件只能挂载在document上，否则只有鼠标在元素内才可以拖动，如果鼠标出了元素就无法拖动，用户体验不好。当然鼠标点击的事件onmousedown和鼠标松开的事件onmouseup都是挂载在top元素上的。
下面是鼠标移动的函数：

function fnMove(event,disX,disY,main){
        var l = event.clientX - disX,
        t = event.clientY - disY；
        main.style.left=l+'px';
        main.style.top=t+'px';
}

这里我们先获取到鼠标移动的位置，本来我们直接设置main距离左边和上边的距离就是鼠标位置可以实现拖动吗？答案是可以的。鼠标位置不断更新，main距离左边和上边的距离也不断变化，是不是就实现了拖动呢。尝试一下就发现这样是 有bug 的。因为对位置的更新默认就是对元素的左上角的位置进行更新，如果这样做，我们一拖动就会发现鼠标的位置变到了main元素的左上角，这样就很不和谐。
因此我们要将鼠标距离元素边界的位置计算出来并减去，减去过后的值就是main元素左上角距离浏览器左上角的距离。