Heim > Artikel > Web-Frontend > jQuery zieht Elemente und ordnet Elemente neu an_jquery
Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode zum Ziehen und Neuanordnen von Elementen mit jQuery. Der spezifische Implementierungsinhalt ist wie folgt
Rendering:
Auf dem Bild oben sehen Sie die Funktion, die wir heute implementieren möchten. Wenn der Benutzer ein Bild zieht, kann er die bestehende Sortierung des Bildes ändern und die Reihenfolge in der Tabelle aktualisieren. Beispielsweise können Nutzer das Layout unserer Website nach Belieben verschieben, wie es Google iGoogle bereits implementiert hat. Dies verbessert das Benutzererlebnis erheblich.
Im Folgenden werden wir diese Funktion Schritt für Schritt implementieren.
<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") %>"> <jQuery zieht Elemente und ordnet Elemente neu an_jquery alt="jQuery zieht Elemente und ordnet Elemente neu an_jquery" src="<%#Eval("Link") %>" /> </li> </ItemTemplate> </asp:Repeater> </ul> </div>
Um es leichter zu sehen, habe ich einen kleinen Stil hinzugefügt:
var show = jQuery("#show"); //输出提示 var orderlist = jQuery("#orderlist"); //原顺序 var check = jQuery("#check"); //是否更新到数据库
//保存原来的排列顺序 var order = []; list.children("li").each(function() { order.push(this.title); //原排列顺序保存在title,得到后更改title jQuery(this).attr("title", "你可以拖动进行排序"); }); orderlist.val(order.join(','));
//ajax更新 var Update = function(itemid, itemorder) { jQuery.ajax({ type: "post", url: "update.aspx", //id:新的排列对应的ID,order:原排列顺序 data: { id: itemid, order: orderlist.val() }, beforeSend: function() { show.html("正在更新"); }, success: function() { show.html("更新成功"); } }); };
//调用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(""); } };
//执行排列操作 list.sortable({ opacity: 0.7, update: function() { Submit(check.attr("checked")); } });
Es ist ersichtlich, dass das Plug-in nur sorttable aufrufen muss, wenn keine Datenbankoperation ausgeführt wird, um das Ziehen von Elementen abzuschließen.
Das Obige ist die Implementierungsmethode zum Ziehen und Neuanordnen von Elementen in jQuery. Ich hoffe, dass es für das Lernen aller hilfreich ist.