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

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

 

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

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

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

对应在事件上就是

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

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

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

?

css为：

  

#doc{border:1px solid #a0b3d6; background:white;position:absolute; left:150px; top:150px;}

#title{line-height:24px; background:gray; border-bottom:1px solid #a0b3d6; padding-left:5px; cursor:move;}

#content{width:320px; height:150px;}

html:

<div id="doc">

<div id="title">标题</div>

<div id="content">

　　内容……

</div>

</div>

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

　　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";
        }
    }    
};