tableDnD 实现table 行拖拽

 <script type="text/javascript" src="js/jquery.tablednd_0_5.js"></script>
首先需要把该插件导入,路径按照你的相对路径进行填写.
$(document).ready(function(){
 $("table").tableDnD({ //在table节点上进行操作.也可绑定到相应的id或者class上,
  
      onDrop:function(table,row){//这是拖拽之后执行的函数....我个人理解是触发了该事件....
//  alert(row);
          var rows = table.tBodies[0].rows;//这是个获取所有tbody的子元素tr对象.
          //alert("rows length="+rows.length);
           // alert("Row dropped was "+row.id+". New order: ");//注意:这里的row.id表示的是该拖拽的行的id..这表示你可以在每一样的tr节点力输入一个id="";
//这很容易理解.你可以把该行所对应数据库中的id填在此处.<tr id="$v[$i][course_id]">例如这样...
//alert(rows[0].id);
var ids = new Array(rows.length);//这里定义一个数组,然后把得到的id进行保存......
var info = "";
for(var i=0;i<rows.length;i++){
info = (info + rows[i].id) + (((i + 1)== rows.length) ? '':','); //这里转换为类似2,17,27,24,23这样的字符串...
//ids[i] = rows[i].id;
//arr_str+="id:'"+ids[i]+"',";
}//alert(info);
//这样做的目的就是获取数组的内容,然后转化为该类型的字符串,通过ajax进行传递....
$.ajax({
url:"./?page=applicant&do=sort",//你的提交路径..
type:'post',
data:{
interface :info//这里非常重要,我也是在网上找到的方法,测试并且能成功...但是具体原因,希望有大侠给我留言,谢谢了...
},
dataType:'html',//你可以选择返回值类型,当然也可以不写该属性,表示默认根据返回类型进行处理...
success:function(data){
//alert(data);
}
});//end of ajax....
     
   }//end of ondrop
  });//end of tablednd
});///end of ready......


/**************以上是前台页面的代码..后台代码是用php实现的...其他语言的可以作为参考....原理类似...************************/
$data = $_POST['interface'];//这里接收data里面的interface名称......


$ids = array();
$ids = explode(',',$data);//通过该函数把字符串进行拆分成数组...数组就是id的集合...

for($i=0; $i<count($ids); $i++){
$query = "update twt_applicant_courselist set course_priority = '";
$query.=$i."' where course_id='".$ids[$i]."'";
$flag  = operateSql($query);//该函数是我自己的操作数据库函数...
/************************说下我排序的思路,,,在数据库设置一个字段.叫course_priority...表示优先级..默认都是0...然后当循环执行该循环时,可以按照顺序将其值设为0,1,2,3,4,,,,这也就是为什么我在sql语句里那样写的原因了....*/
//如果你想要实现回调,只要echo返回就好了...在success的函数里执行返回操作...