Wie eine Reihe von HTML-Eingabefeldern neu zu ordnen, ohne in AJAX zu bekommen

Question

Ich bin eine Reihe von Zeilen von HTML-Eingabetextfelder zu erzeugen, die ich meine Endnutzer möchte in der Lage neu zu ordnen. Ich will nicht, AJAX verwenden, aber ich bin in Ordnung mit Javascript.

Ich bin okay mit einigen Pfeiltasten auf der Seite jeder Reihe angeordnet sind, die, wenn sie bewegen, um die Felder nach oben und unten gedrückt wird.

Mein Problem mit AJAX ist, dass sein zu schwer (50-60kb) für genau diese Funktionalität. Ich hatte einen Blick auf einig Yahoo-Code (YUI), aber auch hier scheint es übertrieben für eine bestimmte Funktionalität. Ich fand das - http://www.danvk.org/wp/dragtable/ - das ist scheint, wie der leichteste Code, aber nur erlaubt Neuanordnung von Spalten.

ich auf die letzte Option arbeiten werden, aber ich bin offen für andere Gedanken / Ansätze auf, wie dies zu tun (dh der Benutzer zu erlauben, die reihenweise Felder neu anordnen).

PS:. Nicht wichtig, zu dieser Diskussion nehme ich an, aber ich bin mit PHP diesen HTML-Textfelder erzeugen

Answer 1

auf die Antwort der Josef Hinzufügen ...

Nach W3C DOM Level 2 Core- Spezifikation :

  

insert

     

Fügt den Knoten newChild vor dem vorhandenen untergeordneten Knoten refChild. [...]   Wenn die newChild bereits im Baum ist, wird er zuerst entfernt.

Es besteht also keine Notwendigkeit removeChild() aufrufen, bevor insertChild() aufrufen.

Auch IE6 DOM-Unterstützung ist sehr schlecht, so dass Sie spezifischen Code für sie schreiben könnte müssen. Oder vielleicht möchten Sie lieber keine Zeit unterstützt diesen Browser verschwenden und Benutzer fragen aktualisieren . Oder, wenn Sie wirklich IE6 unterstützen müssen, vielleicht eine JavaScript-Bibliothek (wie jQuery) könnte eine einfache Lösung sein.

Edit: Dies ist die letzte Lösung JavaScript, basierend auf Josef Antwort:

function up(row) {
    var prevRow = row.previousSibling;
    if(prevRow) {
        row.parentNode.insertBefore(row, prevRow);
    }
}

Answer 2

Sie können eine Javascript-Funktion ähnlich wie diese schreiben

function up(row) {
    var prevRow = row.previousElementSibling;
    if(prevRow != null) {
        row.parentNode.removeChild(row);
        document.body.insertBefore(row, prevRow);
    }
};

und verwenden Sie es in Ihren Reihen wie folgt aus:

<p>
    <input type="text"/>
    <a onclick="up(this.parentNode)">Up</a>
</p>

Ich stimmen Sie zu, dass Sie nicht wirklich benötigen einen JavaScript-Framework für eine sehr einfache Aufgabe wie diese verweisen.

Answer 3

Sie scheinen zu verwechseln; AJAX ist ein allgemeiner Begriff, der Javascript mit zusätzlichen Inhalten von einem Server über Unteranforderungen zu laden, ohne dass tatsächlich eine neue Seite geladen wird. Es gibt viele verschiedene Javascript-Bibliotheken, die AJAX-Anforderungen verarbeiten kann.

Vielleicht denken Sie jetzt eines der beliebtesten Bibliotheken wie JQuery, wenn Sie „AJAX“ sagen?

Wie für Ihre Frage - eine Sache zu erinnern ist, dass mit dem richtigen Serverkonfiguration, Client-Browser wird allgemein Cache Javascript-Bibliotheken nach der ersten Anfrage; damit die konsistente Gesamtladezeit wird nicht als durch die Größe solcher Bibliotheken betroffen - nur diese ersten Seite zu laden. Sie können auch verhindern, dass wenn Sie die Google gehosteten Kopie von JQuery , die bereits wahrscheinlich ist durch die große Mehrheit der Besucher auf Ihrer Website zwischengespeichert werden.