Плагін Draggable дозволяє зробити елементи сторінки переміщуються за допомогою миші. Ці елементи автоматично отримують клас ui-draggable. а в момент переміщення ще і ui-draggable-dragging.
Перетягуються елементи генерують три нових типи подій: start, drag, і stop. Вони відбуваються в момент захоплення, при переміщенні і в момент відпускання переміщуваного елемента. Обробники цих подій будуть отримувати 2 параметра: стандартний об'єкт події від браузера і додатковий об'єкт (назвемо його ui) з наступними полями:
ui.helper - допоміжний елемент (helper) в формі об'єкта jQuery. Подробиці про цей елемент можна дізнатися в описі властивості helper. ui.position - позиція переміщуваного елемента щодо найближчого батька c заданим типом позиціонування (css-властивість position одно relative або absolute або fixed). ui.offset - позиція переміщуваного елемента щодо початку документа.
Для зміни координат елемента в момент його переміщення можна використовувати властивість position всередині обробника подій:
або властивість offset, яке можна отримати безпосередньо у переміщуваного об'єкта:
↓ Ім'я властивості: типи значень (значення за замовчуванням)
Зупиняє \ відновлює можливість перетягувати елементи сторінки.
Задавши це властивість із значенням false. ви скасуєте автоматичну установку класу "ui-draggable" на перетягуються елементи. Це може бути оптимизационной мірою, в разі, якщо необхідно зробити перетягувати відразу кілька сотень елементів або навіть більше.
Цей параметр визначає в який елемент сторінки буде поміщений допоміжний елемент (helper, см. Однойменну властивість). За замовчуванням, він поміщається туди ж, де знаходиться сам переміщуваний елемент. appendTo може бути заданий DOM-елементом або селектором. за яким буде здійснено пошук елемента.
Цей параметр визначає в якому напрямку можна буде переміщати елемент. Можливі значення 'x'. 'Y' і false (тільки по вертикалі, тільки по горизонталі або в будь-якому).
Параметр cancel визначає, за які елементи можна "братися" для переміщення вихідного елемента.
Визначає, чи може draggable-елемент бути доданий до набору sortable-елементів (див. Плагін sortable). Параметр може приймати або значення false. або рядок з селектором, що визначає групу sortable-елементів. Для коректної роботи скрипта, у draggable-елемента бажано поставити допоміжний елемент helper: "clone" (див. Властивість helper).
Параметр containment визначає обмеження на переміщення елемента при перетягуванні. За замовчуванням їх немає, але вони можуть бути задані областю будь-якого елементу (наприклад за допомогою селекторів 'parent', 'document', 'window' і ін.) І крім цього можна задати обмеження прямокутником з координатами [x1, y1, x2 , y2].
Перетягуються елементи можна навчити "примагничивается" до країв інших елементів (див. Вище приклад "Магнітні краю"). Для цього потрібно задати властивість snap зі значенням true. при якому один до одного примагничивается будуть перетягуються елементи. Крім цього, параметру snap можна привласнити селектор і тоді, переміщуваний елемент буде магнітитися тільки до елементів, які йому відповідають. Властивості snapMode і snapTolerance допоможуть налаштувати параметри прімагнічіванія.
Властивість snapMode визначає режим прімагнічіванія перетягуваного елемента (див. Властивість snap). Можливі значення: 'inner', 'outer', 'both'. Вони означають, що перетягуються елементи будуть магнітитися тільки до внутрішніх, тільки до зовнішніх або до обох сторін обраних у властивості snap елементам.
snapTolerance визначає відстань (у пікселях), перебуваючи на якому починає діяти прімагнічіваніе (див. властивість snap).
Перетягуються елементи, знайдені за допомогою заданого в stack селектора, при старті переміщення будуть автоматично отримувати найбільший z-index (див. Вище приклад "Авто z-index").