JQuery-tableDnD 拖拽的基本使用介紹

本篇文章是對JQuerytableDnD拖拽的基本使用進行了詳細的分析介紹需要的朋友參考下

　　在頁面上導入js

復制代碼代碼如下:
jqueryminjs
jquerytablednd__js
注意一定要先導入jqueryminjs 否則出錯

　　
·建table

復制代碼代碼如下:
<table id="table" cellspacing="" cellpadding="">
    <tr id=""><td></td><td>One</td><td>some text</td></tr>
    <tr id=""><td></td><td>Two</td><td>some text</td></tr>
    <tr id=""><td></td><td>Three</td><td>some text</td></tr>
    <tr id=""><td></td><td>Four</td><td>some text</td></tr>
    <tr id=""><td></td><td>Five</td><td>some text</td></tr>
    <tr id=""><td></td><td>Six</td><td>some text</td></tr>
</table>

　　
·插入js代碼

復制代碼代碼如下:
<script type="text/javascript">
$(document)ready(function() {
$("#table")tableDnD();
});
</script>

　　
·ok
·例子

復制代碼代碼如下:

　　
<%
    String path = requestgetContextPath();
    String basePath = requestgetScheme() + "://" + requestgetServerName() + ":" + requestgetServerPort() + path + "/";
    pageContextsetAttribute("basePath" basePath);
%>
<!DOCTYPE HTML PUBLIC "//WC//DTD HTML Transitional//EN">
<html>
    <head>
       <script type="text/javascript"
           src="${basePath}common/js/jqueryminjs"></script>
       <script type="text/javascript"
           src="${basePath}common/js/jquerytablednd__js"></script>
       <style type="text/css">
aa {
    background: #FF
}

bb {
    background: #FF
}
</style>

<script type="text/javascript">

$(document)ready(function() {
color();
        $("#table")tableDnD({
           onDrop:function(tablerow){
           var b = $(row)children()eq()text();
           color();
            }
        });

    });

    function color()
    {
       var tbody = $("table[id=table] tr");
       tbodyeach(function(index){
          var cc = index%;
          if(==cc)
            {
            $(this)removeClass();
            $(this)addClass("aa");
            }
           else
           {
           $(this)removeClass();
            $(this)addClass("bb");
           }
       });
    }
</script>
    </head>

    <body>
       <table id="table" cellspacing="" cellpadding="">
           <tr id=""><td></td><td>One</td><td>some text</td></tr>
           <tr id=""><td></td><td>Two</td><td>some text</td></tr>
           <tr id=""><td></td><td>Three</td><td>some text</td></tr>
           <tr id=""><td></td><td>Four</td><td>some text</td></tr>
           <tr id=""><td></td><td>Five</td><td>some text</td></tr>
           <tr id=""><td></td><td>Six</td><td>some text</td></tr>
       </table>

    </body>
</html>

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20077.html