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, чтобы ознакомиться с полной документацией.

В завершение

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

Реклама

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

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204