Javascript 简单实现鼠标拖动DIV

Javascript简单的实现鼠标拖动DIV的效果。没有什么技术含量，全当笔记。

要想实现鼠标拖动效果，免不了要计算元素在浏览器中的坐标，那首先来学习一下各种坐标。

参考：

Javascript获取页面的各种坐标汇总

实现拖动：

1.定义需要的变量

var bool=false,       
    pageX=0,        
    pageY=0,   
	  
    //需要拖动的目标DIV
    element = $("#tb_window"),
    eWidth = element.width(),
    eHeight = element.height(),
	 
    //在该DIV的范围内拖动
    pElement = $("#flashFrame"),
    pWidth = pElement.width(),
    pHeight = pElement.height();

2.鼠标mousedown事件计算鼠标焦点x相对目标DIV的坐标

element.mousedown(function(event)
    {
        needMove=true;             
        var position = element.position();
        pageX = event.pageX-position.left; //鼠标和DIV的相对坐标
        pageY = event.pageY-position.top;
	             
        element.css('cursor','move');     
    });

3.鼠标mouseup事件将变量needMove赋值false，表示不需要移动DIV

element.mouseup(function(event)
    {            
        needMove=false;  
    });

4.鼠标的mousemove事件开始移动目标DIV

element.mousemove(function(event)
    {            
        if(!needMove) {return;}   
        
        //鼠标在页面的坐标 - 鼠标和DIV的相对坐标 = DIV在页面的坐标        
         var ePageX = event.pageX;    
        var ePageY = event.pageY;
	    
        var x = ePageX-pageX;            
        var y = ePageY-pageY;    
        if (ePageX <= eWidth/ 2 || ePageX >= pWidth - eWidth / 2)
        {
            return;
        }
	    
        if (ePageY< eHeight / 2 || ePageY >= pHeight - eHeight / 2)
        {
            return;
        }           
        element.css("left", x);            
        element.css("top", y);  
    });

5.总结，以上代码只是简单实现鼠标拖动DIV的思路（当然功能也是可以的），具体的性能，兼容性和代码扩展性都有待商榷。比如：还可以增加参数控制DIV在指定的大小范围内拖动等。