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