jQuery实现拖动

jQuery实现拖动

思路：

1. 定位：给要拖动的对象设置一个定位（position：aboselute);
2. 坐标：使用event.clientX、event.clientY获取鼠标位置，使用obj.offset().left、obj.offset().top获取对象离浏览器左上角的坐标；
3. 事件：mousedown,mouseup,mousemove三大鼠标事件；
4. 事件绑定与移除：bind()和unbind()；
5. 鼠标键的判断：使用event.button可以获得鼠标码（0：左键，1：滑轮，2：右键）
6. 代码如下：

    function drag(obj)    //obj为需要拖动DOM的jQuery对象    {        obj.bind("mousedown",start);        function start(event){            if(event.button == 0){                deltaX = event.clientX - obj.offset().left;                deltaY = event.clientY - obj.offset().top;                $(document).bind("mousemove",move);                $(document).bind("mouseup",stop);            }            return false;        }        function move(event){            obj.css({                "left":(event.clientX-deltaX)+'px',                "top":(event.clientY-deltaY)+'px'            });            return false;        }        function stop(){            $(document).unbind("mousemove",move);            $(document).unbind("mouseup",stop);            return false;        }    }