扩展了 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]