拖拽效果的实现原理分析2

上文对html5支持的浏览器的拖拽效果进行了分析，本文不采用任何库，来分析下拖拽的过程

先想想我们平时拖拽是怎么操作的，大致可以分为几下几个步骤：

1. 鼠标按下，鼠标移动，拖拽，被拖动的物件跟着走
2. 鼠标松开，物件停止，无拖动了
3. 计算距离，拖拽的距离（鼠标移动）

对应在事件上就是

1. onmousedown，onmousemove ，开始拖拽
2. onmouseup ，停止拖拽
3. 计算相对的拖拽距离

下面我们按照这种思路，写一个拖拽效果,假设我们拖动标题，这块的内容就跟着走。

1. 首先我们来写一个含有标题和内容的块

?

　　首先在拖动的时候，我们要计算拖动对象的相对于屏幕的上方和下方的距离

　　top = target.top;

　　left = target.left;

　　书写onmousedown 事件，这个是能够被拖动对象上

　　title.onmousedown  = function(event){

　　　　event = event||window.event;

　　　　//防止IE中的文字被选定选中

　　　　this.unselectstart = function(){

　　　　　　return false;

　　　　};

　　　　//记录开始的位置

　　　　curX = event.pageX ? event.pageX :event.clientX  +document.body.scrollLeft||document.documentElement.scrollLeft;

　　　　curY = event.pageY ? event.pageY :event.clientY  +document.body.scrollTop||document.documentElement.scrollTop;　　　

　　}

　　书写onmousemove 事件，这个是在文档中移动的，顾应该加在document上

　　document.onmousemove  = function(event){

　　　　event = event||window.event;

　　　　var nowX = event.pageX ? event.pageX :event.clientX  +document.body.scrollLeft||document.documentElement.scrollLeft,

　　　　　　nowY = event.pageY ? event.pageY :event.clientY  +document.body.scrollTop||document.documentElement.scrollTop;

　　　　var disX = nowX - curX,

　　　　　　disY = nowY - curY;

　　　　target.style.top  = top +disY;

　　　　target.style.left =  left +disX;

　　书写onmouseup 事件，这个也是在文档中的，加在document上吧

　　document.onmouseup = function(event){

　　　　event = event||window.event;

　　　　left = target.left;

　　　　top = target.top;

　　}

完整的代码如下：

var params = {    left: 0,    top: 0,    currentX: 0,    currentY: 0,    flag: false};//获取相关CSS属性var getCss = function(o,key){    return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,false)[key];     };

var startDrag = function(title, target){

    params.left = getCss(target, "left");    params.top = getCss(target, "top");

    title.onmousedown = function(event){        event = event||window.event;        bar.onselectstart = function(){                return false;        }         params.flag = true;        params.currentX =  event.pageX ? event.pageX :event.clientX  +document.body.scrollLeft||document.documentElement.scrollLeft,        params.currentY = event.pageY ? event.pageY :event.clientY  +document.body.scrollTop||document.documentElement.scrollTop;    };    document.onmouseup = function(){        params.flag = false;            params.left = getCss(target, "left");        params.top = getCss(target, "top");    };    document.onmousemove = function(event){        event  = event ||window.event;        if(params.flag){            var nowX = event.pageX ? event.pageX :event.clientX  +document.body.scrollLeft||document.documentElement.scrollLeft,                nowY = event.pageY ? event.pageY :event.clientY  +document.body.scrollTop||document.documentElement.scrollTop;            var disX = nowX - params.currentX,                disY = nowY - params.currentY;            target.style.left = parseInt(params.left) + disX + "px";            target.style.top = parseInt(params.top) + disY + "px";        }    }    };