HTML中 table鼠標拖拽排序技巧的完成
發表時間:2023-12-23 來源:明輝站整理相關軟件相關文章人氣:
[摘要]table是HTML里不可缺少的一項屬性,很多地方我們都要用到,本文主要介紹了HTML table鼠標拖拽排序功能的相關資料,需要的朋友可以參考下,希望可以幫助到大家。效果圖:1.引入文件<script src="js/jquery-1.10.1.min.js">&...
table是HTML里不可缺少的一項屬性,很多地方我們都要用到,本文主要介紹了HTML table鼠標拖拽排序功能的相關資料,需要的朋友可以參考下,希望可以幫助到大家。
效果圖:


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();
});
大家學會了嗎?趕緊動手自己操作一下吧。
相關推薦:
HTML里關于表格table嵌套的注意事項
Table,tr,td,th這些表格標簽元素怎么使用
jQuery如何對table進行排序操作的示例詳解
以上就是HTML中 table鼠標拖拽排序功能的實現的詳細內容,更多請關注php中文網其它相關文章!
網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。