PDF Seiten neu anordnen — Reihenfolge per Drag-and-Drop ändern

Die Scans sind in der falschen Reihenfolge, die Vertragsanlagen durcheinandergeraten, das Titelblatt in der Mitte gelandet. Seiten in einem PDF-Editor blind nach Nummern umzuordnen ist mühsam. Das Werkzeug „Neu anordnen" in pdfredX zeigt alle Seiten als Miniaturansichten und lässt Sie sie mit Maus oder Finger bewegen: Karte ziehen — die Reihenfolge ändert sich. Alles im Browser, nichts wird auf einen Server hochgeladen.

Schritt 01. PDF laden

Öffnen Sie pdfredx.com und ziehen Sie ein PDF in den Ablagebereich — oder wählen Sie es über den Datei-Explorer. PDF.js rendert jede Seite zu einer Miniaturansicht, und das Dokument wird als Galerie von Karten ausgelegt. Kein einziges Byte geht an eine entfernte Maschine.

Schritt 02. Die Seiten ziehen

Greifen Sie eine Karte und ziehen Sie — unter dem Cursor erscheint eine halbtransparente Kopie (Ghost), an ihrem Platz bleibt eine blasse Spur. Fahren Sie über die Seite, vor die Sie die gezogene setzen möchten, und lassen Sie los: Die Reihenfolge baut sich sofort neu auf, die benachbarten Karten rücken nach.

• Mit Maus oder Finger bewegen — funktioniert auf Computer und Telefon gleich.
• Eine kurze Auslöseschwelle (~9 px) — unterscheidet ein Ziehen von einer versehentlichen Berührung, sodass die Galerie auf dem Touchscreen beim Scrollen nicht „springt".
• Ein überflüssiges Blatt entfernen — die Schaltfläche 🗑 an einer Karte löscht die Seite; die übrigen behalten ihre Reihenfolge.

Sie müssen keine Nummern eingeben — Sie sehen die Seiten selbst und legen sie aus wie physische Blätter auf einem Schreibtisch.

Schritt 03. Ergebnis speichern

Wenn die Reihenfolge passt, klicken Sie auf „PDF erstellen". Die App durchläuft die Galerie in der aktuellen Reihenfolge der Karten und baut über jsPDF eine einzige Datei zusammen — die neue Seitenreihenfolge wandert direkt in das exportierte Dokument. Das fertige PDF wird direkt aus dem Browser heruntergeladen. Kostenlos, ohne Registrierung, ohne Server-Warteschlange.

Wie es technisch funktioniert

Das Neuanordnen läuft über das Seiten-Array items[], das die App beim Laden erstellt hat. Die Reihenfolge der Karten in der Galerie ist genau die Reihenfolge der Array-Elemente. Das Ziehen ist über Pointer Events umgesetzt (ein Code-Pfad für Maus und Touch): Beim Loslassen findet die App die Karte unter dem Cursor und verschiebt das Element im Array:

const [item] = items.splice(fromIdx, 1);  // Seite aus der ursprünglichen Position genommen
items.splice(toIdx, 0, item);             // vor der Zielkarte eingefügt
render();                                  // Galerie neu gezeichnet

Die Miniaturansichten selbst werden dabei nicht neu gerendert — nur die Position des Elements ändert sich. Die Reihenfolge wird erst beim Schritt „PDF erstellen" auf das finale Dokument angewendet, sodass Sie Karten beliebig oft bewegen können, ohne die Datei neu zusammenzubauen.

Bekannte Einschränkungen

Die Reihenfolge wird über Seitengrenzen festgelegt. Das Werkzeug ordnet ganze Blätter um. Ein Fragment innerhalb einer Seite zu verschieben oder sie zu schneiden ist eine andere Aufgabe (für Doppelseiten gibt es ein eigenes Werkzeug).

Das Export-Ergebnis ist ein Raster. Beim Zusammenbau werden Seiten als Bilder eingefügt, daher lässt sich der Text in der fertigen Datei nicht markieren, und Hyperlinks und Lesezeichen der Quelle werden nicht übernommen. Das Neuanordnen selbst beeinflusst das nicht — es ist eine Eigenschaft des Exports.

Speicher bei großen Dokumenten. Alle Seiten liegen in der Galerie als Miniaturansichten; bei Hunderten Seiten kann das Scrollen auf schwachen Geräten stocken.

Müssen Sie mehrere Dateien vor dem Sortieren zu einer verbinden? Das ist das Werkzeug PDFs zusammenführen. Und um ein Dokument in Teile zu schneiden — PDF teilen.

Probieren Sie es gleich aus — pdfredx.com, ohne Registrierung, Ihre Dateien bleiben bei Ihnen.

Ein unterzeichneter Vertrag soll mit seinen Anlagen in der richtigen Reihenfolge weitergeleitet werden. Aus einem Personalpaket müssen vor dem Versand ein paar überflüssige Blätter heraus. Ein Bündel Scans soll für eine Einreichung in Reihenfolge gebracht werden. Für all diese Vorgänge an geschlossenen, oft bereits unterschriebenen Dokumenten bietet ein gewöhnlicher Online-Dienst dasselbe an: die ganze Datei auf seinen Server laden. Das heißt: Ein Vertrag mit Angaben, Unterschriften und Stempeln wandert auf eine fremde Maschine — für ein simples Umsortieren von Blättern. Betrachten wir das Risiko und die lokale Alternative.

Wohin das Dokument bei serverbasierten Sortierdiensten geht

Wenn Sie ein PDF in einen üblichen Online-Seitenorganizer laden, wandert die Datei vollständig auf eine entfernte Maschine. Von dort geht es nach der Richtlinie des Dienstes weiter, die kaum jemand liest:

• das Dokument wird im temporären Speicher eines Auftragsverarbeiters abgelegt (AWS, GCP, Azure);
• es wird auf einem fremden Server verarbeitet;
• es wird von einigen Stunden bis zu mehreren Tagen „zur Sicherheit" aufbewahrt;
• es wird zusammen mit Metadaten protokolliert — IP, Zeit, Dateiname und -größe.

Für das Umsortieren von Blättern ist das ein besonders ärgerlicher Tausch: Der Vorgang ist rein visuell und braucht überhaupt keine serverseitige Berechnung — der Preis dafür ist jedoch der volle Zugriff eines fremden Dienstes auf den Inhalt des Vertrags.

Der DSGVO-Blickwinkel: Übermittlung an einen Dritten

Sobald das Dokument auf den Server eines Dienstes hochgeladen wird, findet im Sinne der DSGVO eine Übermittlung personenbezogener Daten an einen Dritten statt. Für einen simplen Vorgang wie das Umsortieren von Seiten zieht das eine ganze Pflichtenkette nach sich: einen Auftragsverarbeitungsvertrag (AVV) mit dem Anbieter, die Prüfung des Serverstandorts (Übermittlung in Drittländer außerhalb der EU), eine Rechtsgrundlage für die Verarbeitung. Besonders heikel ist das bei unterschriebenen Verträgen mit fremden personenbezogenen Daten — die Verantwortung dafür tragen dann Sie.

Die lokale Verarbeitung dreht die Logik um: Verlässt das Dokument das Gerät nicht, gibt es keine Übermittlung an einen Dritten — und damit entfällt die gesamte darauf aufbauende Pflichtenkette.

Lokales Neuanordnen: das Dokument verlässt den Tab nicht

pdfredX ordnet Seiten neu an, ohne die Datei irgendwohin hochzuladen. Das ist eine Folge der Architektur und lässt sich überprüfen.

Die Datei wird lokal gelesen. PDF.js öffnet das Dokument im Tab und zeichnet die Seiten als Miniaturansichten. Es gibt keine Netzwerkanfrage mit Ihrer Datei.

Das Neuanordnen geschieht im Speicher des Tabs. Karten ziehen, überflüssige Blätter löschen, der finale Zusammenbau — all das sind Operationen auf bereits geladenen Daten. Nichts wird versendet.

Die fertige Datei entsteht auf dem Client. jsPDF schreibt die neue Reihenfolge direkt im Tab in ein PDF und übergibt es dem Browser zum Herunterladen — in den Ordner „Downloads", nicht auf einen Server und zurück.

Es funktioniert offline. Laden Sie den Vertrag, trennen Sie die Internetverbindung und ordnen Sie die Blätter um — alles läuft weiter. Das Netz wird nur benötigt, um die App einmal zu laden.

In der Praxis: Ziehen Sie die Miniaturansichten in die gewünschte Reihenfolge, löschen Sie die überflüssigen Seiten mit der Schaltfläche 🗑 und speichern Sie das Ergebnis. Das Dokument bleibt die ganze Zeit bei Ihnen.

Was wir nicht garantieren können — ein ehrlicher Hinweis

Die clientseitige Verarbeitung schützt ein Dokument davor, auf externe Server zu gelangen, doch sie ist kein Schild gegen jede Bedrohung, und das Gegenteil zu versprechen wäre unehrlich.

Schadsoftware oder ein Keylogger auf dem Gerät. Ist die Maschine kompromittiert, kann ein Programm Dateien am Browser vorbei direkt von der Festplatte lesen.

Browser-Erweiterungen mit weitreichenden Rechten. Eine Erweiterung mit der Berechtigung „Daten auf allen Websites lesen" kann theoretisch den Inhalt des Tabs sehen. Arbeiten Sie für sensible Dokumente in einem Profil ohne Fremd-Erweiterungen oder in einem privaten Fenster.

Die gespeicherte Datei bleibt auf Ihrer Festplatte. Ist das Gerät nicht durch Verschlüsselung geschützt, können vertrauliche Dateien bei physischem Zugriff von Dritten gelesen werden.

Wir gewährleisten die Isolation auf Ebene des Browser-Tabs. Der Rest liegt beim Nutzer.

Ordnen Sie Seiten neu an und bereinigen Sie sie, ohne das Dokument auf einen Server zu laden — pdfredx.com, kostenlos, ohne Registrierung.

Das Ziehen von Miniaturansichten ist eine vertraute Geste, doch dahinter stecken mehrere nicht offensichtliche Entscheidungen. Natives HTML5-Drag-and-Drop funktioniert auf Touchscreens schlecht und gibt wenig Kontrolle über das Aussehen des gezogenen Elements. Maus- und Touch-Ereignisse lassen sich getrennt behandeln, doch das sind zwei parallele Pfade mit doppelter Logik. Sehen wir uns an, wie das Neuanordnen der Seiten in pdfredX aufgebaut ist: warum Pointer Events statt nativem DnD, wie der Ghost-Klon von den Daten getrennt ist und warum die gesamte Reihenfolge auf einem einzigen splice beruht.

Die architektonische Wahl: Pointer Events über DOM-Karten

Warum kein natives Drag and Drop. Standard-HTML5-DnD ist für das Übertragen von Daten zwischen Elementen und Anwendungen gedacht, ist aber auf Mobilgeräten heikel und lässt das „fliegende" Element kaum gestalten. Für eine Galerie, die auf Desktop und Telefon gleich funktionieren soll, ist das unpraktisch.

Warum Pointer Events. Pointer Events vereinen Maus, Touch und Stift in einem einzigen Ereignisstrom (pointerdown / pointermove / pointerup). Ein Code-Zweig — und die Geste funktioniert überall gleich. Gezogen werden gewöhnliche DOM-Galeriekarten (Elemente mit data-id), nicht Pixel auf einem Canvas: Die Miniaturansichten wurden bereits beim Laden von PDF.js gezeichnet, und was sich bewegen muss, ist ihre Darstellung, nicht ein Neuzeichnen des Bildes.

Die Umsetzung im Einzelnen

Die Startschwelle: ein Ziehen von einem Tippen trennen

Bei pointerdown werden die Karte und die Startkoordinaten gemerkt, das Ziehen beginnt aber noch nicht. Es startet erst, wenn Finger/Cursor die Schwelle überschritten hat:

const THRESH = 9;
// ...in pointermove:
if (!moved && Math.hypot(dx, dy) < THRESH) return; // noch Zittern/ein Tippen, kein Ziehen

Die Schwelle von 9 px ist auf Touchscreens entscheidend: Ohne sie würde jedes Tippen auf eine Karte ein Ziehen starten, und die Galerie ließe sich nicht scrollen. Schaltflächen und Felder innerhalb einer Karte (🗑 löschen usw.) sind durch eine separate Prüfung vom Erfassen ausgenommen, damit ein Klick darauf kein Ziehen auslöst.

Der Ghost-Klon: eine visuelle Kopie, von den Daten getrennt

Sobald die Schwelle überschritten ist, wird ein Ghost erzeugt — ein Klon der Karte, der dem Cursor folgt, während das Original abdunkelt:

ghost = dragEl.cloneNode(true);        // eine visuelle Kopie
ghost.style.cssText = 'position:fixed; pointer-events:none; z-index:9999; opacity:.82; ...';
document.body.appendChild(ghost);
dragEl.style.opacity = '0.3';          // eine blasse Spur am ursprünglichen Platz
document.getElementById('SA').style.overflow = 'hidden'; // Scrollen der Galerie sperren

Der Ghost ist rein visuell: pointer-events:none, damit er keine Ereignisse abfängt und das Erkennen der Karte, über der wir uns befinden, nicht stört. Die Daten berührt er nicht — es ist eine DOM-Kopie, kein items[]-Element.

Das Ziel erkennen und mit einem einzigen splice umordnen

Beim Loslassen versteckt die App den Ghost, fragt den Browser, welche Karte sich unter dem Loslasspunkt befindet (elementFromPoint), und verschiebt das Element im Array:

ghost.style.display = 'none';
const target = getCard(document.elementFromPoint(x, y)); // die Karte unter dem Cursor
// ...
const fromIdx = items.findIndex(x => x.id === dragId);
const toIdx   = items.findIndex(x => x.id === target.dataset.id);
const [item] = items.splice(fromIdx, 1);  // herausgenommen
items.splice(toIdx, 0, item);             // vor dem Ziel eingefügt
render();

Das gesamte Umordnungsmodell sind zwei splice-Aufrufe über items[]. Das Array bleibt die einzige Quelle der Wahrheit über die Reihenfolge; die Galerie und das künftige PDF lesen es einfach. Der Ghost wird für die Messung versteckt, weil elementFromPoint sonst den Ghost selbst zurückgäbe (er ist ja unter dem Cursor) statt der Karte darunter.

Aufräumen des Zustands

pointerup und pointercancel führen beide zu einem gemeinsamen cleanup(): den Ghost entfernen, die Deckkraft des Originals wiederherstellen, das Scrollen von #SA entsperren, die Flags zurücksetzen. Ein Aufräumpfad für den normalen Abschluss und für das Abbrechen der Geste — der Zustand bleibt nicht hängen, wenn das Ziehen abgebrochen wurde.

Kompromisse und Grenzen des Ansatzes

Das Umordnen erfolgt über Seitengrenzen. Es bewegen sich ganze Blatt-Karten; ein Fragment innerhalb einer Seite kann dieser Mechanismus nicht verschieben.

Die Reihenfolge wird beim Export angewendet. Das Ziehen ändert nur items[] und die Galerieansicht; die neue Reihenfolge wandert beim jsPDF-Zusammenbau in die Datei. Das ist günstig (man kann endlos ziehen, ohne neu zusammenzubauen), doch bis zum Export ändert sich auf der Festplatte nichts.

Messung über elementFromPoint. Die Zielerkennung stützt sich auf das sichtbare Element unter dem Punkt; auf sehr dichten Rastern hängt der Treffer davon ab, wo genau die Karte losgelassen wird (vor welcher Miniaturansicht der Cursor steht).

Was als Nächstes kommt

Mehrfachauswahl und Verschieben einer Gruppe — mehrere markierte Seiten mit einer Geste auf einmal ziehen.

Auto-Scroll an den Rändern — wenn der Ghost sich dem oberen oder unteren Rand der Galerie nähert, die Liste sanft scrollen, sodass eine Seite ohne manuelles Scrollen durch ein langes Dokument getragen werden kann.

Möchten Sie die Geste testen — laden Sie ein mehrseitiges PDF auf pdfredx.com und ordnen Sie die Seiten per Ziehen neu an. Ohne Registrierung, ohne Datei-Upload auf einen Server.