jquery dragsort table实现拖拽排序

转自：http://haoningabc.iteye.com/blog/1593640

dragsort官网地址：http://dragsort.codeplex.com/

html代码如下（需引入jquery和dragsort.js）：

 

    <html>  
    <head>  
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="jquery.dragsort-0.5.2.min.js"></script>
    </head>  
    <body>  
        <table id="list1" border="1">  
            <thead id="gridThead">  
                    <tr style="cursor: pointer;">  
                        <td class="listHeadCell">编号</td>  
                        <td class="listHeadCell">名称</td>  
                    </tr>  
            </thead>  
            <tbody id="gridtbody">  
                <tr>  
                    <td name="biaozhi">1</td>  
                    <td>名称1</td>  
                </tr>     
                <tr>      
                    <td name="biaozhi">2</td>  
                    <td>名称2</td>  
                </tr>     
                <tr>      
                    <td name="biaozhi">3</td>  
                    <td>名称3</td>  
                </tr>     
                <tr>      
                    <td name="biaozhi">4</td>  
                    <td>名称4</td>  
                </tr>  
            </tbody>  
        </table>  
        <br/>  
        <textarea name="listhaoSortOrder" id="listhaoSortOrder" rows=10 cols=100></textarea>  
        <script type="text/javascript">  
            $(document).ready(function(){  
                $("#gridtbody").dragsort({ itemSelector: "tr", dragSelector: "tr", dragBetween: true,dragEnd: saveOrder1, placeHolderTemplate: "<tr></tr>" });  
            });  
            function saveOrder1() {  
            //  var data = $("#gridtbody").map(function() { return $(this).children().html(); }).get();  
                var data = $("[name='biaozhi']").map(function() { return $(this).html(); }).get();  
                $("#listhaoSortOrder").val(data.join("|"));  
            };  
        </script>  
    </body>  
    </html>

代码运行效果截图：

 

posted @ 2015-07-31 14:20  Java碎碎念  阅读(1714)  评论(0)  编辑  收藏  举报