Table中对tr的上下拖拽移动

前天公司门户网站中新闻发布后写好的新闻想实现手动上下换位置。在网上找了一个专门为table写的js，有源码，可以自己改样式，动态效果。

正文开始：

首先需要引用一个js：

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};    },    /** Get the position of an element by going up the DOM tree and adding up all the offsets */    getPosition: function(e){        var left = 0;        var top  = 0;        /** Safari fix -- thanks to Luis Chato for this! */        if (e.offsetHeight == 0) {            /** Safari 2 doesn't correctly grab the offsetTop of a table row            this is detailed here:            http://jacob.peargrove.com/blog/2006/technical/table-row-offsettop-bug-in-safari/            the solution is likewise noted there, grab the offset of a table cell in the row - the firstChild.            note that firefox will return a text node as a first child, so designing a more thorough            solution may need to take that into account, for now this seems to work in firefox, safari, ie */            e = e.firstChild; // a table cell        }        while (e.offsetParent){            left += e.offsetLeft;            top  += e.offsetTop;            e     = e.offsetParent;        }        left += e.offsetLeft;        top  += e.offsetTop;        return {x:left, y:top};    },    mousemove: function(ev) {        if (jQuery.tableDnD.dragObject == null) {            return;        }        var dragObj = jQuery(jQuery.tableDnD.dragObject);        var config = jQuery.tableDnD.currentTable.tableDnDConfig;        var mousePos = jQuery.tableDnD.mouseCoords(ev);        var y = mousePos.y - jQuery.tableDnD.mouseOffset.y;        //auto scroll the window        var yOffset = window.pageYOffset;         if (document.all) {            // Windows version            //yOffset=document.body.scrollTop;            if (typeof document.compatMode != 'undefined' &&                 document.compatMode != 'BackCompat') {               yOffset = document.documentElement.scrollTop;            }            else if (typeof document.body != 'undefined') {               yOffset=document.body.scrollTop;            }        }                    if (mousePos.y-yOffset < config.scrollAmount) {            window.scrollBy(0, -config.scrollAmount);        } else {            var windowHeight = window.innerHeight ? window.innerHeight                    : document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight;            if (windowHeight-(mousePos.y-yOffset) < config.scrollAmount) {                window.scrollBy(0, config.scrollAmount);            }        }        if (y != jQuery.tableDnD.oldY) {            // work out if we're going up or down...            var movingDown = y > jQuery.tableDnD.oldY;            // update the old value            jQuery.tableDnD.oldY = y;            // update the style to show we're dragging            if (config.onDragClass) {                dragObj.addClass(config.onDragClass);            } else {                dragObj.css(config.onDragStyle);            }            // If we're over a row then move the dragged row to there so that the user sees the            // effect dynamically            var currentRow = jQuery.tableDnD.findDropTargetRow(dragObj, y);            if (currentRow) {                // TODO worry about what happens when there are multiple TBODIES                if (movingDown && jQuery.tableDnD.dragObject != currentRow) {                    jQuery.tableDnD.dragObject.parentNode.insertBefore(jQuery.tableDnD.dragObject, currentRow.nextSibling);                } else if (! movingDown && jQuery.tableDnD.dragObject != currentRow) {                    jQuery.tableDnD.dragObject.parentNode.insertBefore(jQuery.tableDnD.dragObject, currentRow);                }            }        }        return false;    },    /** We're only worried about the y position really, because we can only move rows up and down */    findDropTargetRow: function(draggedRow, y) {        var rows = jQuery.tableDnD.currentTable.rows;        for (var i=0; i<rows.length; i++) {            var row = rows[i];            var rowY    = this.getPosition(row).y;            var rowHeight = parseInt(row.offsetHeight)/2;            if (row.offsetHeight == 0) {                rowY = this.getPosition(row.firstChild).y;                rowHeight = parseInt(row.firstChild.offsetHeight)/2;            }            // Because we always have to insert before, we need to offset the height a bit            if ((y > rowY - rowHeight) && (y < (rowY + rowHeight))) {                // that's the row we're over                // If it's the same as the current row, ignore it                if (row == draggedRow) {return null;}                var config = jQuery.tableDnD.currentTable.tableDnDConfig;                if (config.onAllowDrop) {                    if (config.onAllowDrop(draggedRow, row)) {                        return row;                    } else {                        return null;                    }                } else {                    // If a row has nodrop class, then don't allow dropping (inspired by John Tarr and Famic)                    var nodrop = jQuery(row).hasClass("nodrop");                    if (! nodrop) {                        return row;                    } else {                        return null;                    }                }                return row;            }        }        return null;    },    mouseup: function(e) {        if (jQuery.tableDnD.currentTable && jQuery.tableDnD.dragObject) {            var droppedRow = jQuery.tableDnD.dragObject;            var config = jQuery.tableDnD.currentTable.tableDnDConfig;            // If we have a dragObject, then we need to release it,            // The row will already have been moved to the right place so we just reset stuff            if (config.onDragClass) {                jQuery(droppedRow).removeClass(config.onDragClass);            } else {                jQuery(droppedRow).css(config.onDropStyle);            }            jQuery.tableDnD.dragObject   = null;            if (config.onDrop) {                // Call the onDrop method if there is one                config.onDrop(jQuery.tableDnD.currentTable, droppedRow);            }            jQuery.tableDnD.currentTable = null; // let go of the table too        }    },    serialize: function() {        if (jQuery.tableDnD.currentTable) {            return jQuery.tableDnD.serializeTable(jQuery.tableDnD.currentTable);        } else {            return "Error: No Table id set, you need to set an id on your table and every row";        }    },    serializeTable: function(table) {        var result = "";        var tableId = table.id;        var rows = table.rows;        for (var i=0; i<rows.length; i++) {            if (result.length > 0) result += "&";            var rowId = rows[i].id;            if (rowId && rowId && table.tableDnDConfig && table.tableDnDConfig.serializeRegexp) {                rowId = rowId.match(table.tableDnDConfig.serializeRegexp)[0];            }            result += tableId + '[]=' + rowId;        }        return result;    },    serializeTables: function() {        var result = "";        this.each(function() {            // this is now bound to each matching table            result += jQuery.tableDnD.serializeTable(this);        });        return result;    }}jQuery.fn.extend(    {        tableDnD : jQuery.tableDnD.build,        tableDnDUpdate : jQuery.tableDnD.updateTables,        tableDnDSerialize: jQuery.tableDnD.serializeTables    });

jquery

里面的

  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);        });

View Code

是为控制拖拽样式，拖拽的元素的控制，里面还有好多自定义模式的自己可以看看发觉下。