/** * TableDnD plug-in for JQuery, allows you to drag and drop table rows * You can set up various options to control how the system will work * Copyright (c) Denis Howlett <denish@isocra.com> * Licensed like jQuery, see http://docs.jquery.com/License. * * Configuration options: *  * onDragStyle *     This is the style that is assigned to the row during drag. There are limitations to the styles that can be *     associated with a row (such as you can't assign a border--well you can, but it won't be *     displayed). (So instead consider using onDragClass.) The CSS style to apply is specified as *     a map (as used in the jQuery css(...) function). * onDropStyle *     This is the style that is assigned to the row when it is dropped. As for onDragStyle, there are limitations *     to what you can do. Also this replaces the original style, so again consider using onDragClass which *     is simply added and then removed on drop. * onDragClass *     This class is added for the duration of the drag and then removed when the row is dropped. It is more *     flexible than using onDragStyle since it can be inherited by the row cells and other content. The default *     is class is tDnD_whileDrag. So to use the default, simply customise this CSS class in your *     stylesheet. * onDrop *     Pass a function that will be called when the row is dropped. The function takes 2 parameters: the table *     and the row that was dropped. You can work out the new order of the rows by using *     table.rows. * onDragStart *     Pass a function that will be called when the user starts dragging. The function takes 2 parameters: the *     table and the row which the user has started to drag. * onAllowDrop *     Pass a function that will be called as a row is over another row. If the function returns true, allow  *     dropping on that row, otherwise not. The function takes 2 parameters: the dragged row and the row under *     the cursor. It returns a boolean: true allows the drop, false doesn't allow it. * scrollAmount *     This is the number of pixels to scroll if the user moves the mouse cursor to the top or bottom of the *     window. The page should automatically scroll up or down as appropriate (tested in IE6, IE7, Safari, FF2, *     FF3 beta * dragHandle *     This is the name of a class that you assign to one or more cells in each row that is draggable. If you *     specify this class, then you are responsible for setting cursor: move in the CSS and only these cells *     will have the drag behaviour. If you do not specify a dragHandle, then you get the old behaviour where *     the whole row is draggable. *  * Other ways to control behaviour: * * Add class="nodrop" to any rows for which you don't want to allow dropping, and class="nodrag" to any rows * that you don't want to be draggable. * * Inside the onDrop method you can also call $.tableDnD.serialize() this returns a string of the form * <tableID>[]=<rowID1>&<tableID>[]=<rowID2> so that you can send this back to the server. The table must have * an ID as must all the rows. * * Other methods: * * $("...").tableDnDUpdate()  * Will update all the matching tables, that is it will reapply the mousedown method to the rows (or handle cells). * This is useful if you have updated the table rows using Ajax and you want to make the table draggable again. * The table maintains the original configuration (so you don't have to specify it again). * * $("...").tableDnDSerialize() * Will serialize and return the serialized string as above, but for each of the matching tables--so it can be * called from anywhere and isn't dependent on the currentTable being set up correctly before calling * * Known problems: * - Auto-scoll has some problems with IE7  (it scrolls even when it shouldn't), work-around: set scrollAmount to 0 *  * Version 0.2: 2008-02-20 First public version * Version 0.3: 2008-02-07 Added onDragStart option *                         Made the scroll amount configurable (default is 5 as before) * Version 0.4: 2008-03-15 Changed the noDrag/noDrop attributes to nodrag/nodrop classes *                         Added onAllowDrop to control dropping *                         Fixed a bug which meant that you couldn't set the scroll amount in both directions *                         Added serialize method * Version 0.5: 2008-05-16 Changed so that if you specify a dragHandle class it doesn't make the whole row *                         draggable *                         Improved the serialize method to use a default (and settable) regular expression. *                         Added tableDnDupate() and tableDnDSerialize() to be called when you are outside the table */jQuery.tableDnD = {    /** Keep hold of the current table being dragged */    currentTable : null,    /** Keep hold of the current drag object if any */    dragObject: null,    /** The current mouse offset */    mouseOffset: null,    /** Remember the old value of Y so that we don't do too much processing */    oldY: 0,    /** Actually build the structure */    build: function(options) {        // Set up the defaults if any        this.each(function() {            // This is bound to each matching table, set up the defaults and override with user options            this.tableDnDConfig = jQuery.extend({                onDragStyle: null,                onDropStyle: null,				// Add in the default class for whileDragging				onDragClass: "tDnD_whileDrag",                onDrop: null,                onDragStart: null,                scrollAmount: 5,				serializeRegexp: /[^\-]*$/, // The regular expression to use to trim row IDs				serializeParamName: null, // If you want to specify another parameter name instead of the table ID                dragHandle: null // If you give the name of a class here, then only Cells with this class will be draggable            }, options || {});            // Now make the rows draggable            jQuery.tableDnD.makeDraggable(this);        });        // Now we need to capture the mouse up and mouse move event        // We can use bind so that we don't interfere with other event handlers        jQuery(document)            .bind('mousemove', jQuery.tableDnD.mousemove)            .bind('mouseup', jQuery.tableDnD.mouseup);        // Don't break the chain        return this;    },    /** This function makes all the rows on the table draggable apart from those marked as "NoDrag" */    makeDraggable: function(table) {        var config = table.tableDnDConfig;		if (table.tableDnDConfig.dragHandle) {			// We only need to add the event to the specified cells			var cells = jQuery("td."+table.tableDnDConfig.dragHandle, table);			cells.each(function() {				// The cell is bound to "this"                jQuery(this).mousedown(function(ev) {                    jQuery.tableDnD.dragObject = this.parentNode;                    jQuery.tableDnD.currentTable = table;                    jQuery.tableDnD.mouseOffset = jQuery.tableDnD.getMouseOffset(this, ev);                    if (config.onDragStart) {                        // Call the onDrop method if there is one                        config.onDragStart(table, this);                    }                    return false;                });			})		} else {			// For backwards compatibility, we add the event to the whole row	        var rows = jQuery("tr", table); // get all the rows as a wrapped set	        rows.each(function() {				// Iterate through each row, the row is bound to "this"				var row = jQuery(this);				if (! row.hasClass("nodrag")) {	                row.mousedown(function(ev) {	                    if (ev.target.tagName == "TD") {	                        jQuery.tableDnD.dragObject = this;	                        jQuery.tableDnD.currentTable = table;	                        jQuery.tableDnD.mouseOffset = jQuery.tableDnD.getMouseOffset(this, ev);	                        if (config.onDragStart) {	                            // Call the onDrop method if there is one	                            config.onDragStart(table, this);	                        }	                        return false;	                    }	                }).css("cursor", "move"); // Store the tableDnD object				}			});		}	},	updateTables: function() {		this.each(function() {			// this is now bound to each matching table			if (this.tableDnDConfig) {				jQuery.tableDnD.makeDraggable(this);			}		})	},    /** Get the mouse coordinates from the event (allowing for browser differences) */    mouseCoords: function(ev){        if(ev.pageX || ev.pageY){            return {x:ev.pageX, y:ev.pageY};        }        return {            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,            y:ev.clientY + document.body.scrollTop  - document.body.clientTop        };    },    /** Given a target element and a mouse event, get the mouse offset from that element.        To do this we need the element's position and the mouse position */    getMouseOffset: function(target, ev) {        ev = ev || window.event;        var docPos    = this.getPosition(target);        var mousePos  = this.mouseCoords(ev);        return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};    },