jQuery拖動元素并對元素進(jìn)行重新排序
本文實例講述了jQuery拖動元素并對元素進(jìn)行重新排序的實現(xiàn)方法，分享給大家供大家參考，具體實現(xiàn)內(nèi)容如下
效果圖：
具體內(nèi)容如下：
從上圖可以看出我們今天要實現(xiàn)的功能。當(dāng)用戶拖動一個圖片時，就能改變圖片的已有排序并更新表中的排列順序。比如用戶可以隨意拖動我們網(wǎng)站中的布局，如谷歌iGoogle就已經(jīng)實現(xiàn)了。這樣便很好的提高了用戶體驗。
下邊，我們一步一步來實現(xiàn)這個功能。
<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>
有一個單選框，當(dāng)用戶選中后，拖動圖片時對數(shù)據(jù)庫中數(shù)據(jù)排序進(jìn)行更改。隱藏域保存原來的圖片排列順序。ul顯示圖片列表。
為了能看得過去，稍微加了點樣式：
var show = jQuery("#show"); //輸出提示
var orderlist = jQuery("#orderlist"); //原順序
var check = jQuery("#check"); //是否更新到數(shù)據(jù)庫
首先將常用的選擇器保存下來，這樣后邊調(diào)用就變得比較簡潔。這一部大家肯定沒有問題。^_^
//保存原來的排列順序
var order = [];
list.children("li").each(function() {
order.push(this.title); //原排列順序保存在title，得到后更改title
jQuery(this).attr("title", "你可以拖動進(jìn)行排序");
});
orderlist.val(order.join(','));
保存原來的排列順序到隱藏域。這里用到了數(shù)組的push()方法，就是將ul每個li中的title(原來的排列順序)添加到數(shù)組中。最后用join()方法，得到了原排列順序，返回一個字符串?，F(xiàn)在排列順序格式為1,2,3 。
//ajax更新
var Update = function(itemid, itemorder) {
jQuery.ajax({
type: "post",
url: "update.aspx",
//id:新的排列對應(yīng)的ID,order：原排列順序
data: { id: itemid, order: orderlist.val() },
beforeSend: function() {
show.html("正在更新");
},
success: function() {
show.html("更新成功");
}
});
};
接下來，將ajax更新塊單獨分出來。這樣程序變得比較整潔，這塊沒有新東西。
//調(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組成一個字符串傳遞給了Update()方法。函數(shù)中的參數(shù)update為checkbox是否選中。
//執(zhí)行排列操作
list.sortable({
opacity: 0.7,
update: function() {
Submit(check.attr("checked"));
}
});
最后，執(zhí)行排列操作。后臺部分就是對現(xiàn)在ID對應(yīng)原來排列順序的更新，相信大家并不陌生。
可以看出如果不進(jìn)行數(shù)據(jù)庫操作，該插件只需要調(diào)用sorttable便可完成對元素的拖動。
以上就是jQuery拖動元素并對元素進(jìn)行重新排序的實現(xiàn)方法，希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
這是一個基于jquey寫的倒計時。當(dāng)然代碼有點小改動，只是改了一下展示效果。2014-05-05
修改jquery里的dialog對話框插件為框架頁(iframe) 的方法
為什么我不直接用modal form來做呢？所以我就做了個jquery下面dialog的插件，需要引用原來dialog的文件。2010-09-09
本篇文章主要是對JQuery實現(xiàn)全選與取消的兩種簡單方法進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要記錄了在近期開發(fā)中遇到的jQuery dom基本查找方法，然后將各種方法性能做了一個比較，目的是希望自己在以后dom元素查找時，使用最優(yōu)的方案。文中介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
jQuery是時下最流行的 JavaScript 庫?，F(xiàn)在，除了HTML5以外，也有很多jQuery愛好者使用jQuery來開發(fā)游戲，雖然效果沒有Flash那么好，但是這些游戲也看起來很酷。2011-04-04
我原以為我對jQuery的使用還過得去，可是經(jīng)過昨天的工作，我才發(fā)現(xiàn)，原來，我才算是剛剛?cè)腴T。好吧。下面，我簡單講一下，我昨天遇到的問題以及解決方案2012-08-08
這篇文章主要介紹了jQuery中的jQuery()方法用法,以實例形式較為詳細(xì)的分析jQuery()方法的四種常見語法結(jié)構(gòu)與用法技巧,具有一定的參考借鑒價值,需要的朋友可以參考下2014-12-12
這篇文章主要為大家詳細(xì)介紹了jquery編寫Tab選項卡滾動導(dǎo)航切換特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-04-04
delegate()方法是為匹配元素的子元素添加一個或多個事件，并規(guī)定當(dāng)這些事件發(fā)生時運(yùn)行的函數(shù)。下面就是詳細(xì)介紹，有需要的朋友可以來介紹一下。2016-10-10
基于jQuery Ajax實現(xiàn)下拉框無刷新聯(lián)動
這篇文章主要為大家詳細(xì)介紹了基于jQuery Ajax實現(xiàn)下拉框無刷新聯(lián)動，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-12-12