TableDnd(JQuery表格拖拽控件)应用进阶

在上一篇文章一个很好用的JQuery Table拖拽控件中，介绍了TableDnD这个强大的控件，目前是我博客浏览次数最多的文章……现在再简单介绍一下他的应用吧：

?

在之前文章里介绍了，使用时很方便：

?

$("#table").tableDnD();  

?

下面就介绍几个实用的选项：

?

1.onDragClass(onDragStyle)：拖拽时样式，我们在拖拽一个行时，为了醒目一般会给拖拽起来的行设置高亮，这个选项就可以设置在拖拽时为被拖拽的行增加的样式，拖拽结束后清除。

示例代码：

$("#table").tableDnD({    onDragClass:'highlight'});  

?

2.onDrop：拖拽结束事件函数，在拖拽结束后我们需要做一些处理时可以定义该函数。

示例代码：

$("#table").tableDnD({    onDrop: function(){          alert('done');    }});  

?

?

3.保持某一行不动：很多情况下，我们的表格是一行标题+多行数据的形式，如果直接使用tableDnD，很可能连标题行都可以被随便拖拽，或者数据行被拖拽到标题行上面去了-_-!，怎么解决这个问题呢？只需要给不能拖拽的行增加两个class：nodrop nodrag，示例代码：

<table id="table"><tr class='nodrop nodrag'>   <td>ID</td><td>Content</td></tr><tr>    <td>1</td><td>sth.</td></tr><tr>    <td>2</td><td>anything</td></tr><table>

$('#table').tableDnD();

?这样第一行是无法拖拽的，只能拖拽第二，三行，当然，你也可以用js为某一行增加这两个class，可以参考JQuery的addClass方法

?

以上已经能满足大部分对于表格拖拽的需求了，当然还有一些其他的高级选项，暂不赘述，需要的可以参考上一篇文章中的url。