easy-drag - легко помочь вам добиться эффекта шелковистого перетаскивания

JavaScript
easy-drag - легко помочь вам добиться эффекта шелковистого перетаскивания

Как фронтенд-воркер, вы наверняка сталкивались с таким требованием: внедритьТянутьВиджеты, такие как наггетс Обратная связь значок нижний правый угол страницы.

image.png

перетаскиваемыйЧто должен делать виджет? easy-drag был создан, чтобы решить эту проблему!

принцип

Прежде всего, мы должны определить, как добиться эффекта смещения, существует не более двух видов:

  • Один из них — использовать абсолютное позиционирование для настройки при перетаскивании.topа такжеleftзначение, но эта схема зависит от того, как расположен родительский компонент
  • Другой - использоватьtransform, настроить вектор смещения элемента при перетаскивании, это решение не зависит от метода позиционирования родительского компонента

Здесь мы, конечно, должны выбрать последнее, потому что последнее может адаптироваться к большему количеству сценариев.

Затем мы должны определить, как рассчитать вектор смещения, здесь мы слушаемmouseсобытие для достижения:

  1. элемент монитораmousedownСобытие, запишите начальное положение смещения элемента;
  2. контролировать документmousemoveСобытие, изменить положение смещения элемента в соответствии с вектором смещения мыши;
  3. контролировать документmouseupсобытие, сброс данных.

Таким образом, мы определили общий план.

выполнить

Общий план определен, а конкретная реализация – мелочи, но есть еще много моментов, на которые стоит обратить внимание:

Что, если элемент изначально имел свойство преобразования?

потому что элемент изначально был устанавливаемымtransformатрибут, поэтому мы устанавливаемtransformАтрибут должен быть в стиле элементаtransformНа основе суперпозиции, поэтому вам нужно использоватьwindow.getComputedStyle(element).transform, затем соединитеtransformАтрибуты

Элементы как отклонение?

QQ20211015-160522-HD.gif

Причина в прошивкеtransformсвойство, которое будет перетаскиватьсяtranslate3dсклеен с оригиналомtransformзначение позже, в то время как оригиналratateПоворачивает систему координат элемента, заставляя его «отклоняться» при применении эффекта перемещения.

Добавьте эффект панорамирования к оригиналуtransformЭтой проблемы можно избежать, добавив значение перед именем.

Как производительность?

QQ20211015-161436-HD.gif

Шелковисто-гладкий, потому чтоtranslate3dатрибут заставляет браузер создавать отдельный слой для элемента, в то время какtranslate3dПри изменении положения элемента он вызовет только рекомпозитивный слой браузера и не вызовет перестановку и перерисовку, поэтому, естественно, это очень плавно ~

Как использовать

Установить

npm i easy-drag

использовать

import enableDrag from 'easy-drag';
const disableDrag = enableDrag(document.querySelector('.draggable'));
disableDrag();

Функция

  • easy-drag поддерживает отмену перетаскивания
  • easy-drag поддерживает настройку диапазона перетаскивания, который не может быть превышен по умолчанию.document.body
  • easy-drag поддерживает настройку точки перетаскивания, применимые сценарии: всплывающее окно должно быть настроено на перетаскивание, но перетаскивать можно только область заголовка
  • easy-drag поддерживает настройку пользовательских обратных вызовов, в том числеonDragStart,onDrag,onDragEnd

Github

easy-drag: GitHub.com/Главы округов…

В то же время Amway рассмотрит другие мои проекты на Github:

Категории