明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

HTML中 table鼠標(biāo)拖拽排序技巧的完成

發(fā)表時間：2023-12-23 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]table是HTML里不可缺少的一項屬性，很多地方我們都要用到，本文主要介紹了HTML table鼠標(biāo)拖拽排序功能的相關(guān)資料,需要的朋友可以參考下，希望可以幫助到大家。效果圖：1.引入文件<script src="js/jquery-1.10.1.min.js">&...
table是HTML里不可缺少的一項屬性，很多地方我們都要用到，本文主要介紹了HTML table鼠標(biāo)拖拽排序功能的相關(guān)資料,需要的朋友可以參考下，希望可以幫助到大家。

效果圖：

HTML中 table鼠標(biāo)拖拽排序功能的實現(xiàn)

HTML中 table鼠標(biāo)拖拽排序功能的實現(xiàn)

1.引入文件

<script src="js/jquery-1.10.1.min.js"></script>  
<link rel="stylesheet" href="Public/css/jquery-ui.min.css">  
<script src="js/jquery-ui.min.js"></script>

2.給元素附上sortable類

<tbody class="sortable">  
   <tr></tr>  
   <tr></tr>   
</tbody>

3.開啟并配置

$(function() {  
    $(".sortable").sortable({  
        cursor: "move",  
        items: "tr", //只是tr可以拖動  
        opacity: 0.6, //拖動時，透明度為0.6  
        revert: true, //釋放時，增加動畫  
        update: function(event, ui) { //更新排序之后  
            var categoryids = $(this).sortable("toArray");  
            var $this = $(this);  
        }  
    });  
    $(".sortable").disableSelection();  
});

大家學(xué)會了嗎？趕緊動手自己操作一下吧。

相關(guān)推薦：

HTML里關(guān)于表格table嵌套的注意事項

Table，tr，td，th這些表格標(biāo)簽元素怎么使用

jQuery如何對table進(jìn)行排序操作的示例詳解

以上就是HTML中 table鼠標(biāo)拖拽排序功能的實現(xiàn)的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。