扩展了 jquery 的插件 easy drag

cxy020

jquery 实现拖动的插件，试了几个，interface 是一个，但是 bug 太多，代码又复杂不好修改，就放弃了。
今天找到了一个叫做 easydrag 的，但用了下也不灵活，于是扩充了一下，现在可以指定拖动的 handle.

jquery.easydrag.js（以下绿色部分是我增加或修改的代码）：
/*** EasyDrag 1.3 - Drag & Drop jQuery Plug-in** For usage instructions please visit http://fromvega.com** Copyright (c) 2007 fromvega*/(function($){    // to track if the mouse button is pressed    var isMouseDown    = false;    // to track the current element being dragged    var currentElement = null;    // callback holders    var dropCallbacks = {};    var dragCallbacks = {};    // global position records    var lastMouseX;    var lastMouseY;    var lastElemTop;    var lastElemLeft;    // returns the mouse (cursor) current position    $.getMousePosition = function(e){        var posx = 0;        var posy = 0;        if (!e) var e = window.event;        if (e.pageX || e.pageY) {            posx = e.pageX;            posy = e.pageY;        }        else if (e.clientX || e.clientY) {            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;            posy = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;        }        return { 'x': posx, 'y': posy };    }    // updates the position of the current element being dragged    $.updatePosition = function(e) {        var pos = $.getMousePosition(e);        var spanX = (pos.x - lastMouseX);        var spanY = (pos.y - lastMouseY);        $(currentElement).css("top",  (lastElemTop + spanY));        $(currentElement).css("left", (lastElemLeft + spanX));    }    // when the mouse is moved while the mouse button is pressed    $(document).mousemove(function(e){        if(isMouseDown){            // update the position and call the registered function            $.updatePosition(e);            if(dragCallbacks[currentElement.id] != undefined){                dragCallbacks[currentElement.id](e);            }            return false;        }    });    // when the mouse button is released    $(document).mouseup(function(e){        if(isMouseDown){            isMouseDown = false;            if(dropCallbacks[currentElement.id] != undefined){                dropCallbacks[currentElement.id](e);            }            return false;        }    });    // register the function to be called while an element is being dragged    $.fn.ondrag = function(callback){        return this.each(function(){            dragCallbacks[this.id] = callback;        });    }    // register the function to be called when an element is dropped    $.fn.ondrop = function(callback){        return this.each(function(){            dropCallbacks[this.id] = callback;        });    }    // set an element as draggable - allowBubbling enables/disables event bubbling    $.fn.easydrag = function(allowBubbling, handle_ids){        return this.each(function(){            // if no id is defined assign a unique one            if(undefined == this.id) this.id = 'easydrag'+time();            if (handle_ids) {                // 修改鼠标光标为移动的形状                for (var i=0; i<handle_ids.length; i++) {                    $("#" + handle_ids[i]).css("cursor", "move");                }            } else {                $(this).css("cursor", "move");            }                        // when an element receives a mouse press            $(this).mousedown(function(e){                if (handle_ids) {                    // 判断是否是在拖动某个 handle                    var srcElement;                    if (e)                        srcElement = e.srcElement;                    else                        srcElement = window.event.srcElement;                                        var exists = false;                    if (srcElement.id != undefined) {                        for (var i=0; i<handle_ids.length; i++) {                            if (handle_ids[i] == srcElement.id) {                                exists = true;                                break;                            }                        }                    }                    if (!exists)                        return false;                }                // set it as absolute positioned                $(this).css("position", "absolute");                // set z-index                $(this).css("z-index", "10000");                // update track variables                isMouseDown    = true;                currentElement = this;                // retrieve positioning properties                var pos    = $.getMousePosition(e);                lastMouseX = pos.x;                lastMouseY = pos.y;                lastElemTop  = this.offsetTop;                lastElemLeft = this.offsetLeft;                $.updatePosition(e);                return allowBubbling ? true : false;            });        });    }})(jQuery);

win.easydrag(false, ['oDragHandle_' + id]);     // 自定义的拖放后处理，记录目标移动到的新位置    win.ondrop(function(){        // save position info        notesData[id].x = parseInt(win.css("left"));        notesData[id].y = parseInt(win.css("top"));    });

原文地址：http://www.cnblogs.com/RChen/archive/2007/09/20/easydrag.html