通過jquery-ui中的sortable來實現(xiàn)拖拽排序的簡單實例
更新時間:2016年05月24日 16:20:21 投稿:jingxian
下面小編就為大家?guī)硪黄ㄟ^jquery-ui中的sortable來實現(xiàn)拖拽排序的簡單實例。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧


1.引入文件
<script src="{sh::PUB}js/jquery-1.10.1.min.js"></script>
<link rel="stylesheet" href="Public/css/jquery-ui.min.css">
<script src="{sh::PUB}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);
$.ajax({
url: '{sh::U("AgentGoods/ajax","todo=categoryDragsort")}',
type: 'POST',
data: 'categoryids=' + categoryids,
success: function(json) {
if (json == 1) {
layer.msg('移動成功', {
icon: 1
});
} else {
$this.sortable("cancel");
layer.msg('移動失敗', {
icon: 2
});
}
}
});
}
});
$(".sortable").disableSelection();
});
4.后臺處理
$categoryids = $this->_post('categoryids');
$categoryidsArr = explode(",",$categoryids);
foreach ($categoryidsArr as $k => $v) {
$data['sort'] = count($categoryidsArr) - $k;
$data['id'] = $v;
M('Agentgoods_category')->where(array('id'=>$v))->save($data);
}
exit('1');
小結(jié):這種排序,不是交換,而是徹底的整體調(diào)整
以上這篇通過jquery-ui中的sortable來實現(xiàn)拖拽排序的簡單實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
jQuery Easyui Tabs擴展根據(jù)自定義屬性打開頁簽
這篇文章主要介紹了jQuery Easyui Tabs擴展根據(jù)自定義屬性打開頁簽的實現(xiàn)代碼,首先增加擴展,接著點擊事件open方法實現(xiàn)easyui tabs擴展,非常不錯,需要的朋友可以參考下2016-08-08
jquery簡單瀑布流實現(xiàn)原理及ie8下測試代碼
可以將分頁獲取的內(nèi)容依次填入四個div中,瀑布流的分頁可以以多頁(比如5頁)為單位二次分頁,這樣可以減少后臺算法的復(fù)雜度;測試環(huán)境:ie8 ff13.0.1 chrome22有興趣的朋友可以了解下2013-01-01
使用jQuery+HttpHandler+xml模擬一個三級聯(lián)動的例子
昨天同學問我有關(guān)如何快速讀取多層級xml文件的問題,于是我就使用省、市、縣模擬了一個三級聯(lián)動的例子,客戶端使用jQuery實現(xiàn)異步加載服務(wù)器返回的json數(shù)據(jù),服務(wù)器端則使用XPath表達式查詢數(shù)據(jù)。2011-08-08
jQuery插件HighCharts實現(xiàn)氣泡圖效果示例【附demo源碼】
這篇文章主要介紹了jQuery插件HighCharts實現(xiàn)氣泡圖效果,結(jié)合完整實例形式分析了jQuery插件HighCharts繪制氣泡圖的實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03

