cxy020 发表于 2013-2-7 22:36:10

扩展了 jquery 的插件 easy drag

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 != undefined){                dragCallbacks(e);            }            return false;      }    });    // when the mouse button is released    $(document).mouseup(function(e){      if(isMouseDown){            isMouseDown = false;            if(dropCallbacks != undefined){                dropCallbacks(e);            }            return false;      }    });    // register the function to be called while an element is being dragged    $.fn.ondrag = function(callback){      return this.each(function(){            dragCallbacks = callback;      });    }    // register the function to be called when an element is dropped    $.fn.ondrop = function(callback){      return this.each(function(){            dropCallbacks = 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).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 == 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.x = parseInt(win.css("left"));      notesData.y = parseInt(win.css("top"));    });

原文地址:http://www.cnblogs.com/RChen/archive/2007/09/20/easydrag.html
页: [1]
查看完整版本: 扩展了 jquery 的插件 easy drag