基于jquery的Table Drag and Drop JQuery plugin

之前在列表里完成的上上下下不能满足用户的需求了。说列表过多 每次上一格 下一格 很麻烦。
所以找了这个插件。
Table Drag and Drop JQuery plugin
官网：http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

 

只需要加入如下代码即可随便拖动列

<script type="text/javascript"> $(document).ready(function() { // Initialise the table $("#table-1").tableDnD(); }); </script>

 

并提供一些参数供使用

The parameters are specified as a map in the usual way and are described below:

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.tBodies[0].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.

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)

 

$(document).ready(function() {

	// Initialise the first table (as before)
	$("#table-1").tableDnD();

	// Make a nice striped effect on the table
	$("#table-2 tr:even').addClass('alt')");

	// Initialise the second table specifying a dragClass and an onDrop function that will display an alert
	$("#table-2").tableDnD({
	    onDragClass: "myDragClass",
	    onDrop: function(table, row) {
            var rows = table.tBodies[0].rows;
            var debugStr = "Row dropped was "+row.id+". New order: ";
            for (var i=0; i<rows.length; i++) {
                debugStr += rows[i].id+" ";
            }
	        $(#debugArea).html(debugStr);
	    },
		onDragStart: function(table, row) {
			$(#debugArea).html("Started dragging row "+row.id);
		}
	});
});

 

 

评论

1 楼 kavinhub 2012-05-11  

不支持两个table之间或者不同tbody的drag
Did not see the next version to support this.