扩展了 jquery 的插件 easy drag (转载 木野狐)

扩展了 jquery 的插件 easy drag

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

jquery.easydrag.js（以下 绿色部分是我增加或修改的代码）：

<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>--> /* *
* 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);

调用代码：

<!--<br><br>Code highlighting produced by Actipro CodeHighlighter (freeware)<br>http://www.CodeHighlighter.com/<br><br>-->     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