jQuery zieht Elemente und ordnet Elemente neu an

jQuery zieht Elemente und ordnet Elemente neu an_jquery

WBOY

Freigeben： 2016-05-16 15:22:36

Original

1630 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die Implementierungsmethode zum Ziehen und Neuanordnen von Elementen mit jQuery. Der spezifische Implementierungsinhalt ist wie folgt

Rendering:

Der spezifische Inhalt ist wie folgt:

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>

Nach dem Login kopieren

Es gibt ein Optionsfeld. Wenn der Benutzer es auswählt, wird die Sortierung der Daten in der Datenbank geändert, wenn das Bild gezogen wird. Das ausgeblendete Feld speichert die ursprüngliche Reihenfolge der Bilder. ul zeigt die Bilderliste an.

Um es leichter zu sehen, habe ich einen kleinen Stil hinzugefügt:

var show = jQuery("#show"); //输出提示 
var orderlist = jQuery("#orderlist"); //原顺序 
var check = jQuery("#check"); //是否更新到数据库

Nach dem Login kopieren

Speichern Sie zunächst die häufig verwendeten Selektoren, damit der spätere Aufruf einfacher wird. Damit wird sicherlich jeder kein Problem haben. ^_^

//保存原来的排列顺序 
var order = []; 
list.children("li").each(function() { 
  order.push(this.title); //原排列顺序保存在title，得到后更改title 
  jQuery(this).attr("title", "你可以拖动进行排序"); 
}); 
orderlist.val(order.join(','));

Nach dem Login kopieren

Speichern Sie die ursprüngliche Sortierreihenfolge im ausgeblendeten Feld. Hier wird die push()-Methode des Arrays verwendet, die darin besteht, den Titel (ursprüngliche Anordnungsreihenfolge) in jedem Li von ul zum Array hinzuzufügen. Schließlich wird die Methode „join()“ verwendet, um die ursprüngliche Anordnungsreihenfolge abzurufen und eine Zeichenfolge zurückzugeben. Das Sortierreihenfolgeformat ist jetzt 1,2,3.

//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("更新成功"); 
    } 
  }); 
};

Nach dem Login kopieren

Als nächstes trennen Sie den Ajax-Update-Block separat. Dadurch wird das Programm sauberer und es gibt in diesem Bereich nichts Neues.

//调用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(""); 
  } 
};

Nach dem Login kopieren

Ähnlich wie beim Abrufen der Sortierreihenfolge wird die ID in einen String zusammengestellt und an die Update()-Methode übergeben. Die Parameteraktualisierung in der Funktion hängt davon ab, ob das Kontrollkästchen aktiviert ist.

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

Nach dem Login kopieren

Führen Sie abschließend den Sortiervorgang durch. Der Hintergrundteil ist die Aktualisierung der aktuellen ID entsprechend der ursprünglichen Anordnungsreihenfolge. Ich glaube, jeder ist damit vertraut.

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.