HTML table鼠標(biāo)拖拽排序功能
發(fā)布時(shí)間：2017-02-09 14:10:27 作者：佚名 
我要評(píng)論
我要評(pí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類(lèi)
<tbody class="sortable"> <tr></tr> <tr></tr> </tbody>
3.開(kāi)啟并配置
$(function() {
$(".sortable").sortable({
cursor: "move",
items: "tr", //只是tr可以拖動(dòng)
opacity: 0.6, //拖動(dòng)時(shí)，透明度為0.6
revert: true, //釋放時(shí)，增加動(dòng)畫(huà)
update: function(event, ui) { //更新排序之后
var categoryids = $(this).sortable("toArray");
var $this = $(this);
}
});
$(".sortable").disableSelection();
});
以上所述是小編給大家介紹的HTML table鼠標(biāo)拖拽排序功能，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
結(jié)合html5+nodejs+express實(shí)現(xiàn)拖拽上傳的功能
html5開(kāi)始支持拖拽上傳的需要的api。nodejs也是一個(gè)最近越來(lái)越流行的技術(shù)，在nodejs開(kāi)發(fā)中，最常用的開(kāi)發(fā)框架之一是expess，它是一個(gè)類(lèi)似mvc模式的框架。2014-08-08HTML5拖拽文件到瀏覽器并實(shí)現(xiàn)文件上傳下載功能代碼
使用HTML5拖拽文件到瀏覽器并實(shí)現(xiàn)文件上傳下載，html5的功能是越來(lái)越強(qiáng)大了，下面與大家分享下具體的實(shí)現(xiàn)代碼，感興趣的朋友可以參考下哈2013-06-06
HTML5實(shí)現(xiàn)的超流暢拖拽效果(相對(duì)以前的html版本)
和以前的HTML版本比起來(lái)，HTML5實(shí)現(xiàn)的拖拽效果更加流暢2013-04-27- 拖拽上傳最重要的就是js部分的代碼，它實(shí)現(xiàn)了70%的功能，另外30%僅僅是把圖片信息提交到后臺(tái)，然后做對(duì)應(yīng)的處理，比如壓縮啊，裁剪啊云云，感興趣的朋友可以參考下哈，希望2013-04-01
突襲HTML5之Javascript API擴(kuò)展4—拖拽(Drag/Drop)概述
拖拽(Drag/Drop)是個(gè)非常普遍的功能,可以抓住一個(gè)對(duì)象，并且拖動(dòng)到你想放置的區(qū)域;在HTML5中，拖拽(draganddrop)成為了標(biāo)準(zhǔn)操作，任何元素都支持。正因?yàn)檫@個(gè)功能太普遍了2013-01-31html5指南-3.如何實(shí)現(xiàn)html元素拖拽功能
本文的內(nèi)容是關(guān)于在html5中如何實(shí)現(xiàn)html元素拖拽功能。在html5之前要實(shí)現(xiàn)拖拽，需要借助js，現(xiàn)在html5內(nèi)部就支持了拖拽的功能，但是要實(shí)現(xiàn)稍微復(fù)雜的功能還是少不了js的幫2013-01-07
HTML5+JS實(shí)現(xiàn)的拖拽效果，是通過(guò)簡(jiǎn)單的幾句JS代碼及可實(shí)現(xiàn)將對(duì)象從一個(gè)容器拖拽到另外一個(gè)容器2012-10-11
