通過(guò)jquery-ui中的sortable來(lái)實(shí)現(xiàn)拖拽排序的簡(jiǎn)單實(shí)例


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可以拖動(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);
$.ajax({
url: '{sh::U("AgentGoods/ajax","todo=categoryDragsort")}',
type: 'POST',
data: 'categoryids=' + categoryids,
success: function(json) {
if (json == 1) {
layer.msg('移動(dòng)成功', {
icon: 1
});
} else {
$this.sortable("cancel");
layer.msg('移動(dòng)失敗', {
icon: 2
});
}
}
});
}
});
$(".sortable").disableSelection();
});
4.后臺(tái)處理
$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)整
以上這篇通過(guò)jquery-ui中的sortable來(lái)實(shí)現(xiàn)拖拽排序的簡(jiǎn)單實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
- jquery ui sortable拖拽后保存位置
- jquery sortable的拖動(dòng)方法示例詳解
- jquery實(shí)現(xiàn)的鼠標(biāo)拖動(dòng)排序Li或Table
- jquery控制listbox中項(xiàng)的移動(dòng)并排序
- jquery對(duì)元素拖動(dòng)排序示例
- 基于JQuery的列表拖動(dòng)排序?qū)崿F(xiàn)代碼
- jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序
- jquery控制listbox中項(xiàng)的移動(dòng)并排序的實(shí)現(xiàn)代碼
- Jquery實(shí)現(xiàn)上下移動(dòng)和排序代碼
- jQuery-ui插件sortable實(shí)現(xiàn)自由拖動(dòng)排序
相關(guān)文章
jQuery 實(shí)現(xiàn)自動(dòng)填充郵箱功能(帶下拉提示)
本文用 jQuery 實(shí)現(xiàn)一個(gè)用戶輸入字符時(shí)出現(xiàn)能夠提示郵箱后綴名的下拉菜單,并且在選擇下拉菜單中的郵箱后綴名后可自動(dòng)填充未完成的輸入框。2014-10-10
jquery win 7透明彈出層效果的簡(jiǎn)單代碼
jquery win 7透明彈出層效果,點(diǎn)擊可以彈出一個(gè)透明層的jquery特效,插件可以調(diào)彈出框的寬度和高度,很不錯(cuò)的一個(gè)彈出層插件。2013-08-08
jQuery之選項(xiàng)卡的簡(jiǎn)單實(shí)現(xiàn)
本篇文章主要是對(duì)jQuery 選項(xiàng)卡的簡(jiǎn)單實(shí)現(xiàn)進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
jquery實(shí)現(xiàn)input框獲取焦點(diǎn)的方法
下面小編就為大家?guī)?lái)一篇jquery實(shí)現(xiàn)input框獲取焦點(diǎn)的方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02
基于jquery實(shí)現(xiàn)的定時(shí)顯示與隱藏div廣告的實(shí)現(xiàn)代碼
有時(shí)候我們需要在jquery中要顯示與隱藏層,很簡(jiǎn)單的方法就是直接使用hide與show方法就可以了,但要定時(shí)我們需要結(jié)合setTimeout函數(shù)來(lái)實(shí)現(xiàn)2013-08-08

