Перетащите стек ЛЕПЕСТОК (S)

Весь код можно найти в сопровождающем репозитории git.

Введение

В этом посте вы узнаете, как создать пользовательский интерфейс перетаскивания, используя стек PETAL (S), без дополнительных библиотек.

Последние три элемента являются наиболее важными для этого поста.

Начиная

Давайте начнем. Ознакомьтесь с историей фиксации, чтобы узнать, как загрузить стек PETAL (S).

Во-первых, давайте посмотрим, как мы можем соединить компонент alpine.js и сервер. Позже мы будем использовать эту технику, чтобы сообщить серверу о событии перетаскивания.

А пока давайте обновим простое состояние сервера из внешнего интерфейса: строку, зарегистрированную как «слово назначения», в поверхностных терминах: «слово данных,: строка».

Следующих строк кода достаточно для нашего первого обхода клиент / сервер.

  1. строка 4: объявить наш изменяемый «мир» присваивания
  2. Строка 11: создать хук phoenix liveview
  3. Строки 12–13: создать экземпляр компонента alpine.js, который через 1 секунду отправляет событие websocket на сервер, сообщая ему изменить назначение с «world» на «WORLD».
  4. строка 16: рендеринг присвоения «мира»
  5. строки 22–23: обработать событие websocket
  6. закулисная магия: соедините компонент alpine.js с крючком страницы (см. [1] и commit)

Где капля?

Основы только пока. Давайте объединим эти основы с API перетаскивания браузера, и готово. Мы можем придерживаться ванильного JS с alpine.js в качестве единственной зависимости javascript. Я бы сказал, что такая зависимость, как SortableJS, избыточна. Лучше держите наш UI-код минимальным, стабильным и свободным от зависимостей.

Как мы это делаем?

  1. Создайте компонент поверхности GridWithDragAndDrop
  2. Обновите пользовательский интерфейс при перетаскивании через alpine.js (немедленно, без обхода клиент / сервер, см. [2])
  3. При падении отправляйте событие в liveview, которое контролирует состояние сервера.
  4. Обновить состояние сервера на основе события

Сначала мы создаем поверхностный компонент феникса без сохранения состояния под названием GridWithDragAndDrop:

  1. линии 2–3: соедините альпийский компонент и крючок для феникса, как раньше.
  2. строки 5–13: отображать перетаскиваемый элемент для каждой записи данных
  3. строки 15–33: отображать цель перетаскивания для каждого пустого поля
  4. строка 25: отправить событие веб-сокета на сервер при падении
  5. строка 29: установите динамические классы CSS с помощью alpine.js (директива : class)

Затем мы используем этот компонент в нашем liveview:

  1. строки 10 и 20–22: обработать событие websocket.

Потребитель события решает, какое событие следует назвать. Однако это решение работает только в том случае, если корневой liveview создает экземпляр компонента сетки, поскольку liveview является целью по умолчанию для событий при вызове «pushEvent ()» в коде javascript.

Любой компонент в качестве цели события

Библиотека поверхностей расширяет свойство события перетащить, чтобы включить идентификатор родительского компонента, кроме имени события letter_dragged.

Мы можем использовать эти метаданные для вызова «pushEventTo ()» в случае, если целью является не корневой liveview, а какой-то другой промежуточный компонент.

Обычно поверхность скрывает такую ​​логику, если вы остаетесь в стране эликсиров. Но поскольку мы используем уровень взаимодействия javascript, мы должны гарантировать, что событие достигнет своей намеченной цели.

Конечный результат

Подведем итоги

Реализация этого пользовательского интерфейса была бы довольно тривиальной, если бы мы занимались только пользовательским интерфейсом.

Наш подход включает в себя сервер, который контролирует состояние.

Surface помогает нам с помощью своей компонентной модели и интуитивно понятной концепции таргетинга на события.

Компонент alpine.js обрабатывает вводимые пользователем данные и немедленно обновляет пользовательский интерфейс, чтобы отразить состояние перетаскивания.

Компонент alpine.js отправляет событие websocket на сервер через подключенный хук phoenix liveview.

Перетаскивание - один из примеров разнообразного взаимодействия с пользователем, которое можно включить с помощью Phoenix LiveView. Я считаю, что это лучшая точка между SPA (лучший UX, но с максимальными усилиями) и Ruby on Rails (лучшая производительность, но громоздкая для оптимизированного UX, даже с StimulusJS).

использованная литература

[1] http://blog.pthompson.org/alpine-js-and-liveview
[2] «https://codeblog.trovster.com/2020/05/alpinejs-drag-and- уронить/"