鼠标拖拽效果原理及完整代码实现

遮罩浮层效果做出来很简单，但是如果加了鼠标拖拽效果就会显得档次更高了，今天来分享下鼠标拖拽效果。

鼠标拖拽效果最主要的事件有三个，也是三个阶段，分别为mousedown,mousemove,mouseup。我们先来分析一哈每个过程的重点。

1>  mousedown即鼠标按下阶段，这个阶段我们要确定鼠标相对于浮层的位置，并将浮层设置为可拖拽状态。

2>  mousemove即鼠标移动阶段，这里需要知道鼠标经过移动后的新位置，并计算出浮层移动后的位置，并设置可移动范围，防止出现滚动条。

3>  mouseup技鼠标放开阶段，这个阶段，只需将可拖拽状态设置为不可拖拽即可。

下面为核心代码：

function mouseDraggle(id){

    $_id(id).addEventListener("mousedown",function(e){    var el=e||window.event;//为了兼容Ie    //计算出鼠标相对于浮层的位置   startX = el.pageX-$_id(id).offsetLeft;   startY = el.pageY-$_id(id).offsetTop;   isDraggle = true;});document.onmousemove=function(e){    //目前浮层元素的位置   var el = e||window.event;//为了兼容Ie，ie中事件对象包含于window对象中   var mouseX = el.pageX - startX;   var mouseY = el.pageY - startY;   //获取页面的大小   var bodyW = document.documentElement.clientWidth;   var bodyH = document.documentElement.clientHeight;    //获取浮层的大小   var partWidth = $_id(id).offsetWidth;    var partHeight = $_id(id).offsetHeight;        var maxWidth = bodyW - partWidth;//浮层可移动的最大width    var maxHeight = bodyH - partHeight;//浮层可移动的最大height    //在可拖拽的状态下进行限制拖拽的范围，不然会出现丑的滚动条   if(isDraggle == true){        var moveX = Math.min(maxWidth,Math.max(0,mouseX));        var moveY =  Math.min(maxHeight,Math.max(0,mouseY));         $_id(id).style.left = moveX + 'px';         $_id(id).style.top = moveY + 'px';   } };document.onmouseup = function(){    isDraggle = false;}}

这是上面三种状态的代码，需要注意的我已经在代码中进行了注释。

ps：

1.在事件监听时，第一个关于事件的参数不加on,而window,document需要加on。

2.pageX和pageY如果有滚动条的话，此时鼠标的位置还包括滚动的width和height；而clientX和clientY则不包括滚动的长度，所以在没有滚动条时，clientX=pageX,clienY=pageY。