HTML中 table鼠標(biāo)拖拽排序技巧的完成
發(fā)表時(shí)間:2024-05-10 來源:明輝站整理相關(guān)軟件相關(guān)文章人氣:
[摘要]table是HTML里不可缺少的一項(xiàng)屬性,很多地方我們都要用到,本文主要介紹了HTML table鼠標(biāo)拖拽排序功能的相關(guān)資料,需要的朋友可以參考下,希望可以幫助到大家。效果圖:1.引入文件<script src="js/jquery-1.10.1.min.js">&...
table是HTML里不可缺少的一項(xiàng)屬性,很多地方我們都要用到,本文主要介紹了HTML table鼠標(biāo)拖拽排序功能的相關(guā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可以拖動(dòng)
opacity: 0.6, //拖動(dòng)時(shí),透明度為0.6
revert: true, //釋放時(shí),增加動(dòng)畫
update: function(event, ui) { //更新排序之后
var categoryids = $(this).sortable("toArray");
var $this = $(this);
}
});
$(".sortable").disableSelection();
});
大家學(xué)會(huì)了嗎?趕緊動(dòng)手自己操作一下吧。
相關(guān)推薦:
HTML里關(guān)于表格table嵌套的注意事項(xiàng)
Table,tr,td,th這些表格標(biāo)簽元素怎么使用
jQuery如何對(duì)table進(jìn)行排序操作的示例詳解
以上就是HTML中 table鼠標(biāo)拖拽排序功能的實(shí)現(xiàn)的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語,涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。