JQuery-tableDnD拖拽的基本使用介绍_jquery



在页面上导入js
代码如下:
jquery-1.3.2.min.js
jquery.tablednd_0_5.js
注意：一定要先导入jquery-1.3.2.min.js 否则出错。

·建table
代码如下:

1	One	some text
2	Two	some text
3	Three	some text
4	Four	some text
5	Five	some text
6	Six	some text

·插入js代码
代码如下:

$(document).ready(function() {
$("#table-1").tableDnD();
});


·ok。
·例子
代码如下:
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
pageContext.setAttribute("basePath", basePath);
%>



src="${basePath}common/js/jquery-1.3.2.min.js">
src="${basePath}common/js/jquery.tablednd_0_5.js">

$(document).ready(function() {
color();
$("#table-1").tableDnD({
onDrop:function(table,row){
var b = $(row).children().eq(0).text();
color();
}
});

});

function color()
{
var tbody = $("table[id='table-1'] tr");
tbody.each(function(index){
var cc = index%2;
if(0==cc)
{
$(this).removeClass();
$(this).addClass("aa");
}
else
{
$(this).removeClass();
$(this).addClass("bb");
}
});
}

1	One	some text
2	Two	some text
3	Three	some text
4	Four	some text
5	Five	some text
6	Six	some text