Переставить страницы в PDF — Визуальный Drag-and-Drop онлайн

Сканы легли в неправильном порядке, приложения к договору перепутаны, титульный лист оказался в середине. Переставлять страницы в PDF-редакторе вслепую по номерам — мучение. Инструмент «Переставить» в pdfredX показывает все страницы миниатюрами и даёт двигать их мышью или пальцем: перетащили карточку — порядок изменился. Всё в браузере, ничего не загружается на сервер.

Шаг 01. Загрузить PDF

Откройте pdfredx.com и перетащите PDF в зону загрузки — или выберите его через проводник. PDF.js рендерит каждую страницу в миниатюру, и документ раскладывается в галерею карточек. Ни один байт не уходит на удалённую машину.

Шаг 02. Перетащить страницы

Возьмите карточку и потяните — под курсором появится полупрозрачная копия (ghost), а на месте останется бледный след. Наведите на страницу, перед которой хотите поставить перетаскиваемую, и отпустите: порядок мгновенно перестроится, соседние карточки сдвинутся.

• Двигать мышью или пальцем — работает одинаково на компьютере и на телефоне.
• Короткий порог срабатывания (~9 px) — отличает перетаскивание от случайного касания, поэтому на тач-экране галерея не «прыгает» при скролле.
• Убрать лишний лист — кнопка 🗑 на карточке удаляет страницу; остальные сохраняют порядок.

Никаких номеров вводить не нужно — вы видите сами страницы и раскладываете их как физические листы на столе.

Шаг 03. Сохранить результат

Когда порядок вас устраивает, нажмите «Создать PDF». Приложение проходит по галерее в текущем порядке карточек и собирает единый файл через jsPDF — новый порядок страниц попадает прямо в экспортируемый документ. Готовый PDF скачивается напрямую из браузера. Бесплатно, без регистрации, без серверной очереди.

Как это работает технически

Перестановка идёт над массивом страниц items[], который приложение построило при загрузке. Порядок карточек в галерее — это и есть порядок элементов массива. Перетаскивание реализовано на Pointer Events (единый код для мыши и тача): при отпускании приложение находит карточку под курсором и переставляет элемент в массиве:

const [item] = items.splice(fromIdx, 1);  // вынули страницу с исходной позиции
items.splice(toIdx, 0, item);             // вставили перед целевой
render();                                  // перерисовали галерею

Сами миниатюры при этом не рендерятся заново — меняется только позиция элемента. Порядок применяется к финальному документу только на шаге «Создать PDF», так что двигать карточки можно сколько угодно без пересборки файла.

Известные ограничения

Порядок задаётся по границам страниц. Инструмент переставляет целые листы. Переместить фрагмент внутри страницы или разрезать её — это другие задачи (для разворотов есть отдельный инструмент).

Результат экспорта растровый. При сборке страницы вставляются как изображения, поэтому текст в итоговом файле нельзя выделить, а гиперссылки и закладки исходника не переносятся. Сама перестановка на это не влияет — это особенность экспорта.

Память на больших документах. Все страницы живут в галерее как миниатюры; на сотнях страниц прокрутка на слабых устройствах может подтормаживать.

Нужно собрать несколько файлов в один перед сортировкой? Это инструмент Объединить PDF. А чтобы разрезать документ на части — Разделить PDF.

Попробуйте прямо сейчас — pdfredx.com, без регистрации, файлы остаются у вас.

Подписанный договор нужно переслать с приложениями в правильном порядке. Из кадрового пакета — убрать пару лишних листов перед отправкой. Из подборки сканов — расставить документы по очереди для подачи. Все эти операции над закрытыми, часто уже подписанными документами обычный онлайн-сервис предлагает сделать одинаково: загрузить весь файл целиком на свой сервер. То есть договор с реквизитами, подписями и печатями уезжает на чужую машину — ради простой перестановки листов. Разберём риск и локальную альтернативу.

Куда уходит документ на серверных сервисах сортировки

Когда вы загружаете PDF в обычный онлайн-органайзер страниц, файл целиком уходит на удалённую машину. Дальше — по политике сервиса, которую мало кто читает:

• документ сохраняется во временном хранилище подрядчика (AWS, GCP, Azure);
• обрабатывается на чужом сервере;
• хранится от нескольких часов до нескольких суток «для надёжности»;
• логируется вместе с метаданными — IP, время, имя и размер файла.

Для перестановки листов это особенно обидный размен: операция чисто визуальная, никаких вычислений на сервере она не требует — а плата за неё полный доступ постороннего сервиса к содержимому договора. Если в документе персональные данные, коммерческие условия или подписи — на чужой машине оказывается всё сразу.

Локальная перестановка: документ не покидает вкладку

pdfredX переставляет страницы, не загружая файл никуда. Это следствие архитектуры, которое можно проверить.

Файл читается локально. PDF.js открывает документ во вкладке и рисует страницы миниатюрами. Сетевого запроса с вашим файлом нет.

Перестановка идёт в памяти вкладки. Перетаскивание карточек, удаление лишних листов, финальная сборка — всё это операции над уже загруженными данными. Ничего не отправляется.

Готовый файл собирается на клиенте. Новый порядок jsPDF записывает в PDF прямо во вкладке и отдаёт браузеру на скачивание — в папку «Загрузки», а не на сервер и обратно.

Работает офлайн. Загрузите договор, отключите интернет и переставьте листы — всё продолжит работать. Сеть нужна только чтобы один раз загрузить приложение.

Практично: перетащите миниатюры в нужном порядке, удалите лишние страницы кнопкой 🗑 и сохраните результат. Документ всё это время остаётся у вас.

Что мы гарантировать не можем — честный дисклеймер

Клиентская обработка защищает документ от ухода на внешние серверы, но это не щит от всех угроз, и обещать обратное было бы нечестно.

Вредоносное ПО или кейлоггер на устройстве. Если машина скомпрометирована, программа может читать файлы с диска в обход браузера.

Браузерные расширения с широкими правами. Расширение с доступом «читать данные на всех сайтах» теоретически видит содержимое вкладки. Для чувствительных документов работайте в профиле без сторонних расширений или в приватном окне.

Сохранённый файл остаётся на вашем диске. Если устройство не защищено шифрованием, конфиденциальные файлы могут быть прочитаны третьими лицами при физическом доступе.

Мы обеспечиваем изоляцию на уровне браузерной вкладки. Остальное — на стороне пользователя.

Переставьте и почистите страницы без загрузки документа на сервер — pdfredx.com, бесплатно, без регистрации.

Перетаскивание миниатюр — привычный жест, но за ним стоит несколько неочевидных решений. Нативный HTML5 Drag and Drop плохо работает на тач-экранах и даёт мало контроля над видом перетаскиваемого элемента. Мышиные и тач-события можно обрабатывать раздельно, но это два параллельных пути с дублирующейся логикой. Разберём, как устроена перестановка страниц в pdfredX: почему Pointer Events вместо нативного DnD, как ghost-клон отделён от данных и почему весь порядок держится на одном splice.

Архитектурный выбор: Pointer Events поверх DOM-карточек

Почему не нативный Drag and Drop. Стандартный HTML5 DnD рассчитан на перенос данных между элементами и приложениями, но капризен на мобильных и почти не даёт стилизовать «летящий» элемент. Для галереи, которая должна одинаково работать на десктопе и телефоне, это неудобно.

Почему Pointer Events. Pointer Events объединяют мышь, тач и стилус в один поток событий (pointerdown / pointermove / pointerup). Одна ветка кода — и жест работает везде одинаково. Перетаскиваются обычные DOM-карточки галереи (элементы с data-id), а не пиксели на Canvas: миниатюры уже отрисованы PDF.js при загрузке, и двигать нужно именно их представление, а не перерисовывать изображение.

Разбор реализации

Порог старта: отделяем перетаскивание от касания

При pointerdown запоминается карточка и стартовые координаты, но перетаскивание ещё не начинается. Оно стартует, только когда палец/курсор ушёл дальше порога:

const THRESH = 9;
// ...в pointermove:
if (!moved && Math.hypot(dx, dy) < THRESH) return; // это ещё дрожание/тап, не drag

Порог в 9 px критичен на тач-экранах: без него любой тап по карточке начинал бы перетаскивание, и галерею было бы невозможно прокрутить. Кнопки и поля внутри карточки (🗑 удалить и др.) исключены из захвата отдельной проверкой, чтобы клик по ним не запускал drag.

Ghost-клон: визуальная копия, отвязанная от данных

Как только порог пройден, создаётся ghost — клон карточки, который летит за курсором, а оригинал притухает:

ghost = dragEl.cloneNode(true);        // визуальная копия
ghost.style.cssText = 'position:fixed; pointer-events:none; z-index:9999; opacity:.82; ...';
document.body.appendChild(ghost);
dragEl.style.opacity = '0.3';          // бледный след на исходном месте
document.getElementById('SA').style.overflow = 'hidden'; // блокируем скролл галереи

Ghost — чисто визуальный: pointer-events:none, чтобы он не перехватывал события и не мешал определить, над какой карточкой мы находимся. Данные он не трогает — это копия DOM, а не элемента items[].

Определение цели и перестановка одним splice

При отпускании приложение прячет ghost, спрашивает у браузера, какая карточка под точкой отпускания (elementFromPoint), и переставляет элемент в массиве:

ghost.style.display = 'none';
const target = getCard(document.elementFromPoint(x, y)); // карточка под курсором
// ...
const fromIdx = items.findIndex(x => x.id === dragId);
const toIdx   = items.findIndex(x => x.id === target.dataset.id);
const [item] = items.splice(fromIdx, 1);  // вынули
items.splice(toIdx, 0, item);             // вставили перед целевой
render();

Вся модель перестановки — это два вызова splice над items[]. Массив остаётся единственным источником истины о порядке; галерея и будущий PDF просто читают его. Ghost прячется на время замера, потому что иначе elementFromPoint вернул бы сам ghost (он же под курсором), а не карточку под ним.

Уборка состояния

pointerup и pointercancel ведут к общей cleanup(): удалить ghost, вернуть прозрачность оригиналу, разблокировать скролл #SA, обнулить флаги. Один путь очистки на нормальное завершение и на прерывание жеста — состояние не зависает, если перетаскивание отменили.

Компромиссы и границы подхода

Перестановка — по границам страниц. Двигаются целые карточки-листы; переносить фрагмент внутри страницы этот механизм не умеет.

Порядок применяется при экспорте. Перетаскивание меняет только items[] и вид галереи; в файл новый порядок попадает на шаге сборки jsPDF. Это дёшево (двигать можно бесконечно без пересборки), но пока не перетащили в экспорт — на диске ничего не меняется.

Замер через elementFromPoint. Определение цели опирается на видимый элемент под точкой; на очень плотных сетках попадание зависит от того, куда именно отпущена карточка (перед какой миниатюрой курсор).

Что дальше

Множественное выделение и перенос группы — перетаскивать сразу несколько отмеченных страниц одним жестом.

Автопрокрутка у краёв — когда ghost подходит к верху или низу галереи, плавно прокручивать список, чтобы переносить страницу через длинный документ без ручного скролла.

Хотите проверить жест — загрузите многостраничный PDF на pdfredx.com и переставьте страницы перетаскиванием. Без регистрации, без загрузки файла на сервер.