欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2016年05月24日 16:20:21   投稿:jingxian  
下面小編就為大家?guī)?lái)一篇通過(guò)jquery-ui中的sortable來(lái)實(shí)現(xiàn)拖拽排序的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

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.開(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);
      $.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è)參考,也希望大家多多支持腳本之家。

相關(guān)文章

  • jQuery元素選擇器實(shí)例代碼

    jQuery元素選擇器實(shí)例代碼

    這篇文章主要為大家詳細(xì)介紹了jQuery元素選擇器實(shí)例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-02-02
  • jQuery Easyui Tabs擴(kuò)展根據(jù)自定義屬性打開(kāi)頁(yè)簽

    jQuery Easyui Tabs擴(kuò)展根據(jù)自定義屬性打開(kāi)頁(yè)簽

    這篇文章主要介紹了jQuery Easyui Tabs擴(kuò)展根據(jù)自定義屬性打開(kāi)頁(yè)簽的實(shí)現(xiàn)代碼,首先增加擴(kuò)展,接著點(diǎn)擊事件open方法實(shí)現(xiàn)easyui tabs擴(kuò)展,非常不錯(cuò),需要的朋友可以參考下
    2016-08-08
  • jquery簡(jiǎn)單瀑布流實(shí)現(xiàn)原理及ie8下測(cè)試代碼

    jquery簡(jiǎn)單瀑布流實(shí)現(xiàn)原理及ie8下測(cè)試代碼

    可以將分頁(yè)獲取的內(nèi)容依次填入四個(gè)div中,瀑布流的分頁(yè)可以以多頁(yè)(比如5頁(yè))為單位二次分頁(yè),這樣可以減少后臺(tái)算法的復(fù)雜度;測(cè)試環(huán)境:ie8 ff13.0.1 chrome22有興趣的朋友可以了解下
    2013-01-01
  • 使用jQuery+HttpHandler+xml模擬一個(gè)三級(jí)聯(lián)動(dòng)的例子

    使用jQuery+HttpHandler+xml模擬一個(gè)三級(jí)聯(lián)動(dòng)的例子

    昨天同學(xué)問(wèn)我有關(guān)如何快速讀取多層級(jí)xml文件的問(wèn)題,于是我就使用省、市、縣模擬了一個(gè)三級(jí)聯(lián)動(dòng)的例子,客戶端使用jQuery實(shí)現(xiàn)異步加載服務(wù)器返回的json數(shù)據(jù),服務(wù)器端則使用XPath表達(dá)式查詢數(shù)據(jù)。
    2011-08-08
  • JQuery中DOM事件冒泡實(shí)例分析

    JQuery中DOM事件冒泡實(shí)例分析

    這篇文章主要介紹了JQuery中DOM事件冒泡用法,實(shí)例分析了事件冒泡的原理與阻止冒泡的方法,需要的朋友可以參考下
    2015-06-06
  • jQuery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)智能浮動(dòng)定位

    jQuery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)智能浮動(dòng)定位

    本文主要介紹了jQuery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)智能浮動(dòng)定位的方法。附上完整代碼,具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧
    2017-01-01
  • jQuery Dom元素操作技巧

    jQuery Dom元素操作技巧

    DOM是一種與瀏覽器、平臺(tái)、語(yǔ)言無(wú)關(guān)的接口,使用該接口可以輕松訪問(wèn)頁(yè)面中所有的標(biāo)準(zhǔn)組件,這篇文章給大家介紹了jquery dom元素操作方法,需要的朋友參考下
    2018-02-02
  • jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果示例【附demo源碼】

    jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果示例【附demo源碼】

    這篇文章主要介紹了jQuery插件HighCharts實(shí)現(xiàn)氣泡圖效果,結(jié)合完整實(shí)例形式分析了jQuery插件HighCharts繪制氣泡圖的實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
    2017-03-03
  • jQuery1.4.2與老版本json格式兼容的解決方法

    jQuery1.4.2與老版本json格式兼容的解決方法

    原來(lái)使用jQuery1.3.2編寫(xiě)的代碼,更換到1.4.2后,使用jQuery.ajax()加載的json文件,不能正常加載。(使用jQuery.getJSON()也一樣)
    2011-02-02
  • jQuery之排序組件的深入解析

    jQuery之排序組件的深入解析

    本篇文章是對(duì)jQuery中的排序組件進(jìn)行了詳細(xì)的分析介紹,需要的朋友參考下
    2013-06-06

最新評(píng)論