快捷導(dǎo)航

通過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插件WebUploader文件上傳
這篇文章主要為大家詳細介紹了如何快速掌握jQuery插件WebUploader文件上傳和圖片上傳操作,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
jQuery 實現(xiàn)自動填充郵箱功能（帶下拉提示）
本文用 jQuery 實現(xiàn)一個用戶輸入字符時出現(xiàn)能夠提示郵箱后綴名的下拉菜單，并且在選擇下拉菜單中的郵箱后綴名后可自動填充未完成的輸入框。
2014-10-10
jquery win 7透明彈出層效果的簡單代碼
jquery win 7透明彈出層效果，點擊可以彈出一個透明層的jquery特效,插件可以調(diào)彈出框的寬度和高度，很不錯的一個彈出層插件。
2013-08-08
EasyUI實現(xiàn)第二層彈出框的方法
本文給大家分享的是一則使用EasyUI實現(xiàn)第二層彈出框的方法，核心代碼是網(wǎng)友提供，這里結(jié)合自己的項目需求，完善了下，推薦給大家。
2015-03-03
jQuery之選項卡的簡單實現(xiàn)
本篇文章主要是對jQuery 選項卡的簡單實現(xiàn)進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02
jQuery樹形下拉菜單特效代碼分享
這篇文章主要介紹了jQuery實現(xiàn)幻樹形下拉菜單特效，代碼簡單，非常具有實用價值，需要的朋友可以參考下
2015-08-08
JQuery從頭學起第三講
看了前面兩講的54淘客網(wǎng)友，我想應(yīng)該對JQuery已經(jīng)有了個初步的認識，知道如何用JQuery選擇器來獲取控件的值，今天我們主要講使用JQuery對常用控件的取值。
2010-07-07
jquery實現(xiàn)input框獲取焦點的方法
下面小編就為大家?guī)硪黄猨query實現(xiàn)input框獲取焦點的方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
基于jquery實現(xiàn)的定時顯示與隱藏div廣告的實現(xiàn)代碼
有時候我們需要在jquery中要顯示與隱藏層，很簡單的方法就是直接使用hide與show方法就可以了，但要定時我們需要結(jié)合setTimeout函數(shù)來實現(xiàn)
2013-08-08
jQuery操作cookie的示例代碼
這篇文章主要介紹了jQuery操作cookie的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-06-06