—»     —»   Draggabilly.js: сделайте элементы на вашем сайте перетаскиваемыми
  Раздел: Скрипты и коды   Комментариев: 2  

Draggabilly.js: сделайте элементы на вашем сайте перетаскиваемыми



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

Draggabilly.js: сделайте элементы на вашем сайте перетаскиваемыми

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

Приступаем к работе

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

<script src="js/draggabilly.pkgd.min.js" type="text/javascript"></script>

Что касается всего остального, то вам нужно будет поработать с javascript-функцией.

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

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

var elem = document.querySelector('#idHere');
var draggie = new Draggabilly( elem, {
// options...
});

#idHere – это id, который нужно поместить внутрь HTML-элемента, который вам нужно сделать перетаскиваемыми. В то же время в переменную draggie вы можете поместить опцию. Если вам не нужна эта функция, вы также можете определить id посредством переменой elem.

К примеру, если у нас имеется id #demo без каких-либо опций, то мы можем создать сниппет следующего образца:

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

Затем внутри HTML вызовите id элемента, который вам нужно сделать перетаскиваемым. Далее следует базовый пример:

<div class="demo-frame">
<div class="justDemo">
<div id="demo" class="relative">
<div class="centered">Drag me</div>
</div>
</div>
</div>

Существует множество иных способов повлиять на работу draggabilly. Вы можете ограничить перетаскивание только по определенным значениям на осях X и Y.

new Draggabilly( '#demo', {
axis: 'x'
});

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

var elem = document.querySelector('#demo');
new Draggabilly( elem, {
handle: '.handle'
});

Данная опция .handle очень удобна при работе с внутренними элементами типа элементов ввода и форм, которые не должны быть перетаскиваемыми. К тому же, за вами остается возможность использовать и другие опции в виде сеток, методов и событий. Перейдите на официальный сайт draggabilly, чтобы ознакомиться с полной документацией.

В завершение

Функция перетаскивания, во многих случаях, оказывает не очень сильное воздействие на веб-дизайн, однако остается очень важной. Ее часто можно встретить в веб-играх или приложениях. Простота установки данной библиотеки делает ее незаменимой в случаях, когда вам необходимо реализовать подобный функционал в собственных проектах!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, javascript
Опубликовал Design FactoRy   Прочитано (раз): 4993   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 29 августа 2014 @ 15:48
Написал: omaxphp — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
фууу.. сложно
Комментарий #2: 10 марта 2015 @ 10:11
Написал: vix — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
interactjs.io smile
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930