Сделайте элементы на своем сайте перетаскиваемыми с помощью Draggabilly.js

Существует множество учебных пособий о том, как сделать вещи перетаскиваемыми на веб-странице. JQuery – один из самых простых способов. Вам даже не нужен пользовательский интерфейс jQuery, просто небольшая помощь от функции направления мыши и, возможно, некоторая дополнительная обработка. Но что, если вы не хотите трогать какой-либо код jQuery, но все же хотите сделать вещи перетаскиваемыми? Тогда draggabilly.js – правильный инструмент для вас.

С Draggabilly.jsВы можете сделать любой элемент на веб-странице перетаскиваемым. Вы можете настроить поведение перетаскиваемого элемента, например, добавить движение сетки, привязать слушателей событий к событиям, ограничить перемещения только осью x и y и многое другое. Он также поддерживает различные браузеры, IE8 + и даже мультитач мобильные браузеры.

Рекомендуемое чтение: создание сенсорного слайдера с помощью SwipeJS и JQuery [Tutorial]

Начиная

Для начала вам нужно всего лишь включить источник Draggabilly.js на свой сайт. Нет необходимости в других зависимостях. Вы можете получить файл из GitHub,

В остальном вы будете работать с некоторыми функциями JavaScript, как показано ниже.

Основное перетаскивание

Вам нужно включить следующий фрагмент на свою страницу, чтобы перетаскивание работало.

var elem = document.querySelector (‘# idHere’);
var draggie = new Draggabilly (elem, {
// опции…
});

#IdHere – это идентификатор, который вы должны поместить в элемент HTML, который хотите сделать перетаскиваемым. Находясь в переменной draggie, вы можете добавить опцию, если хотите. Если вам не нужна эта опция, вы также можете определить идентификатор из переменной elem.

Например, если у меня есть идентификатор #demo без какой-либо опции, тогда я могу написать фрагмент так:

var elem = document.querySelector (‘# demo’);
var draggie = new Draggabilly (‘# demo’);

Затем внутри HTML назовите идентификатор элемента, который вы хотите сделать перетаскиваемым. Ниже приведен основной пример.

Есть много других способов повлиять на поведение Драггабилли. Вы можете ограничить перетаскивание только по оси «y» или «x» следующим образом:

новый Draggabilly (‘#demo’, {
ось: «х»
});

Или вы можете добавить опцию обработки, которая укажет начальный элемент взаимодействия перетаскивания следующим образом:

var elem = document.querySelector (‘# demo’);
новый Draggabilly (Элем, {
handle: «.handle»
});

Этот параметр .handle полезен, когда все внутренние элементы, такие как входы и формы, не нужно перетаскивать. Есть еще много других опций, которые вы можете добавить, такие как ограничения, сетки, методы и события. Направляйтесь в Dragabbilly’s официальный сайт чтобы увидеть полную документацию.

Последняя мысль

Функция перетаскивания, в большинстве случаев, мало влияет на веб-дизайн, но все же очень важна. Чаще всего это происходит в веб-приложениях или играх. Простота его установки и разнообразие методов перетаскивания делает этот инструмент действительно удобным для опробования.