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

jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序

 更新時(shí)間:2015年12月30日 10:25:10   投稿:lijiao  
這篇文章主要介紹了jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序的實(shí)現(xiàn)方法,感興趣的小伙伴們可以參考一下

本文實(shí)例講述了jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序的實(shí)現(xiàn)方法,分享給大家供大家參考,具體實(shí)現(xiàn)內(nèi)容如下

效果圖:

具體內(nèi)容如下:

從上圖可以看出我們今天要實(shí)現(xiàn)的功能。當(dāng)用戶拖動(dòng)一個(gè)圖片時(shí),就能改變圖片的已有排序并更新表中的排列順序。比如用戶可以隨意拖動(dòng)我們網(wǎng)站中的布局,如谷歌iGoogle就已經(jīng)實(shí)現(xiàn)了。這樣便很好的提高了用戶體驗(yàn)。

下邊,我們一步一步來(lái)實(shí)現(xiàn)這個(gè)功能。

<span id="show">
<div>
  <input id="check" type="checkbox" />
</div>
<div>
  <input type="hidden" id="orderlist" />
  <ul id="list">
    <asp:Repeater ID="rptOrder" runat="server">
    <ItemTemplate>
      <li id="<%#Eval("ID") %>" title="<%#Eval("OrderID") %>">
        <img alt="img" src="<%#Eval("Link") %>" />
      </li>
    </ItemTemplate>
    </asp:Repeater>   
  </ul>
</div>

有一個(gè)單選框,當(dāng)用戶選中后,拖動(dòng)圖片時(shí)對(duì)數(shù)據(jù)庫(kù)中數(shù)據(jù)排序進(jìn)行更改。隱藏域保存原來(lái)的圖片排列順序。ul顯示圖片列表。

為了能看得過(guò)去,稍微加了點(diǎn)樣式:

var show = jQuery("#show"); //輸出提示 
var orderlist = jQuery("#orderlist"); //原順序 
var check = jQuery("#check"); //是否更新到數(shù)據(jù)庫(kù)

首先將常用的選擇器保存下來(lái),這樣后邊調(diào)用就變得比較簡(jiǎn)潔。這一部大家肯定沒(méi)有問(wèn)題。^_^

//保存原來(lái)的排列順序 
var order = []; 
list.children("li").each(function() { 
  order.push(this.title); //原排列順序保存在title,得到后更改title 
  jQuery(this).attr("title", "你可以拖動(dòng)進(jìn)行排序"); 
}); 
orderlist.val(order.join(','));

保存原來(lái)的排列順序到隱藏域。這里用到了數(shù)組的push()方法,就是將ul每個(gè)li中的title(原來(lái)的排列順序)添加到數(shù)組中。最后用join()方法,得到了原排列順序,返回一個(gè)字符串?,F(xiàn)在排列順序格式為1,2,3 。

//ajax更新 
var Update = function(itemid, itemorder) { 
  jQuery.ajax({ 
    type: "post", 
    url: "update.aspx", 
    //id:新的排列對(duì)應(yīng)的ID,order:原排列順序
    data: { id: itemid, order: orderlist.val() },  
    beforeSend: function() { 
      show.html("正在更新"); 
    }, 
    success: function() { 
      show.html("更新成功"); 
    } 
  }); 
};

接下來(lái),將ajax更新塊單獨(dú)分出來(lái)。這樣程序變得比較整潔,這塊沒(méi)有新東西。

//調(diào)用ajax更新方法 
var Submit = function(update) { 
  var order = []; 
  list.children("li").each(function() { 
    order.push(this.id); 
  }); 
  var itemid = order.join(','); 
  //如果單選框選中,則更新表中排列順序 
  if (update) { 
    Update(itemid); 
  } 
  else { 
    show.html(""); 
  } 
};

和得到排列順序類似,將ID組成一個(gè)字符串傳遞給了Update()方法。函數(shù)中的參數(shù)update為checkbox是否選中。

//執(zhí)行排列操作 
list.sortable({ 
  opacity: 0.7, 
  update: function() { 
    Submit(check.attr("checked")); 
  } 
});

最后,執(zhí)行排列操作。后臺(tái)部分就是對(duì)現(xiàn)在ID對(duì)應(yīng)原來(lái)排列順序的更新,相信大家并不陌生。

可以看出如果不進(jìn)行數(shù)據(jù)庫(kù)操作,該插件只需要調(diào)用sorttable便可完成對(duì)元素的拖動(dòng)。

以上就是jQuery拖動(dòng)元素并對(duì)元素進(jìn)行重新排序的實(shí)現(xiàn)方法,希望對(duì)大家的學(xué)習(xí)有所幫助。

相關(guān)文章

  • Jquery倒計(jì)時(shí)源碼分享

    Jquery倒計(jì)時(shí)源碼分享

    這是一個(gè)基于jquey寫的倒計(jì)時(shí)。當(dāng)然代碼有點(diǎn)小改動(dòng),只是改了一下展示效果。
    2014-05-05
  • 修改jquery里的dialog對(duì)話框插件為框架頁(yè)(iframe) 的方法

    修改jquery里的dialog對(duì)話框插件為框架頁(yè)(iframe) 的方法

    為什么我不直接用modal form來(lái)做呢?所以我就做了個(gè)jquery下面dialog的插件,需要引用原來(lái)dialog的文件。
    2010-09-09
  • 用JQuery實(shí)現(xiàn)全選與取消的兩種簡(jiǎn)單方法

    用JQuery實(shí)現(xiàn)全選與取消的兩種簡(jiǎn)單方法

    本篇文章主要是對(duì)JQuery實(shí)現(xiàn)全選與取消的兩種簡(jiǎn)單方法進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助
    2014-02-02
  • jQuery查找dom的幾種方法效率詳解

    jQuery查找dom的幾種方法效率詳解

    這篇文章主要記錄了在近期開發(fā)中遇到的jQuery dom基本查找方法,然后將各種方法性能做了一個(gè)比較,目的是希望自己在以后dom元素查找時(shí),使用最優(yōu)的方案。文中介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來(lái)一起看看吧。
    2017-05-05
  • 分享20款好玩的jQuery游戲

    分享20款好玩的jQuery游戲

    jQuery是時(shí)下最流行的 JavaScript 庫(kù)?,F(xiàn)在,除了HTML5以外,也有很多jQuery愛(ài)好者使用jQuery來(lái)開發(fā)游戲,雖然效果沒(méi)有Flash那么好,但是這些游戲也看起來(lái)很酷。
    2011-04-04
  • JQquery的一些使用心得分享

    JQquery的一些使用心得分享

    我原以為我對(duì)jQuery的使用還過(guò)得去,可是經(jīng)過(guò)昨天的工作,我才發(fā)現(xiàn),原來(lái),我才算是剛剛?cè)腴T。好吧。下面,我簡(jiǎn)單講一下,我昨天遇到的問(wèn)題以及解決方案
    2012-08-08
  • jQuery中的jQuery()方法用法分析

    jQuery中的jQuery()方法用法分析

    這篇文章主要介紹了jQuery中的jQuery()方法用法,以實(shí)例形式較為詳細(xì)的分析jQuery()方法的四種常見(jiàn)語(yǔ)法結(jié)構(gòu)與用法技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2014-12-12
  • jquery編寫Tab選項(xiàng)卡滾動(dòng)導(dǎo)航切換特效

    jquery編寫Tab選項(xiàng)卡滾動(dòng)導(dǎo)航切換特效

    這篇文章主要為大家詳細(xì)介紹了jquery編寫Tab選項(xiàng)卡滾動(dòng)導(dǎo)航切換特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2016-04-04
  • jQuery中delegate()方法的用法詳解

    jQuery中delegate()方法的用法詳解

    delegate()方法是為匹配元素的子元素添加一個(gè)或多個(gè)事件,并規(guī)定當(dāng)這些事件發(fā)生時(shí)運(yùn)行的函數(shù)。下面就是詳細(xì)介紹,有需要的朋友可以來(lái)介紹一下。
    2016-10-10
  • 基于jQuery Ajax實(shí)現(xiàn)下拉框無(wú)刷新聯(lián)動(dòng)

    基于jQuery Ajax實(shí)現(xiàn)下拉框無(wú)刷新聯(lián)動(dòng)

    這篇文章主要為大家詳細(xì)介紹了基于jQuery Ajax實(shí)現(xiàn)下拉框無(wú)刷新聯(lián)動(dòng),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-12-12

最新評(píng)論