Бібліотека jQuery UI. Плагін Draggable

40

Від автора: вітаю вас, друзі. У цій статті ми з вами продовжимо знайомитися з бібліотекою jQuery UI. У статті ми познайомимося з плагіном Draggable бібліотеки jQuery UI, який дозволяє зробити елемент сторінки переміщуються, тобто ми можемо перетягувати його по сторінці або в межах якогось контейнера.

Плагін Draggable, як і розглянутий в одній з попередніх статей плагін Sortable, — це також одна з дуже ефектних пропозицій від бібліотеки jQuery UI. Даний плагін можна використовувати, наприклад, разом із зазначеним плагіном сортування, додаючи нові пункти меню в контейнер. Також можна зустріти використання плагіна перетягування в інтернет-магазинах, коли для того, щоб додати товар у кошик, його потрібно перетягнути мишкою у цю саму кошик.

Загалом, сфера використання плагіна Draggable обмежена лише вашою фантазією. Давайте реалізуємо найпростіший приклад перетягування елемента, використовуючи API плагіна. Як звичайно, нам буде потрібно деяка розмітка, в даному випадку це повинен бути елемент для перетягування. Нехай це буде звичайний блок div:

Це перетягуємий блок.

Библиотека jQuery UI. Плагин Draggable

Залишилося викликати метод draggable() для елемента з однойменною класом:

$(function(){
$(‘.draggable’).draggable();
});

Власне, все, можна перевіряти результат. Тепер блок можна пересувати курсор миші по сторінці.

Зараз блок можна переміщати по сторінці в будь-якому напрямку. Якщо нам потрібно перетягування тільки по осі X, або Y, тоді для цього можна скористатися відповідною опцією. Наприклад, дозволимо перетягувати блок тільки по осі X:

$(function(){
$(‘.draggable’).draggable({
axis: «x»
});
});

Як бачите, все досить просто, як і інші плагіни бібліотеки jQuery UI. Вихідні коди до статті ви можете завантажити за посиланням. Більше про jQuery і бібліотеці jQuery UI ви можете дізнатися з наших уроків або курсу. Удачі!