14.08.14, 16:49
0 комментарий
  Уроки

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

В интернете можно найти множество руководств о том, как сделать элементы веб-сайта перетаскиваемыми. jQuery – это один простейших подходов. Вам даже не потребуется jQuery UI, а просто немного помощи от функции направления курсора мыши. Но что если вам не хочется трогать код jQuery, но при этом хотите сделать элементы перетаскиваемыми? Тогда вам точно подойдет 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, чтобы ознакомиться с полной документацией.

В завершение

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

Напишите своё мнение