Перетягування елементів інтерфейсу за допомогою курсору миші є, швидше за все, самим інтуїтивно зрозумілим способом взаємодії користувача з вашим сайтом або додатком. Люди часто намагаються використовувати перетягування за допомогою курсору миші для таких дій:
- Переміщення повідомлень email у папки.
- Зміна порядку елементів в списках.
- Переміщення об'єктів в іграх, таких як карткові ігри або головоломки.
В даному уроці ми розглянемо, як створити інтерфейс з технікою перетащи-і-кинь на jQuery і побудуємо завершене додаток: дитячу гру по розкладці карт.
Для додавання функціоналу перетащи-і-кинь до ваших сторінок потрібно включити бібліотеку jQuery і плагін jQuery UI. jQuery UI є фантастичним доповненням для jQuery і включає велику кількість віджетів інтерфейсу для реалізації різних візуальних ефектів і алгоритмів роботи, в тому числі і для техніки перетащи-і-кинь.
Найпростіший спосіб підключити бібліотеки - скористатися Google CDN:
Робимо елемент перетягувати
Коли ви додаєте елемент до вашої веб сторінці (наприклад, div або зображення), то він фіксується в певному положенні. Однак за допомогою jQuery UI легко зробити його перетягувати за допомогою курсору миші.
Щоб зробити елемент переміщується, просто викликаємо метод draggable () для нього. Ось так:
Додаємо опції перетягування
Методу draggable () можна передати багато різних опцій для настройки поведінки елемента при перетягуванні:
Деякі часто використовувані опції з великого списку:
containment За замовчуванням ви можете перетягувати елементи по всій сторінці. Але можна обмежити область переміщення певною частиною. Для опції containment можна використовувати значення: 'parent' Обмежуємо область переміщення батьківським елементом 'document' Обмежуємо область переміщення всієї сторінкою 'window' Обмежуємо область переміщення вікном браузера Селектор Обмежуємо область переміщення обраним елементом Масив з 4 значень ([x1, y1, x2, y2 ]) Обмежуємо область переміщень певним прямокутником cursor Змінюємо курсор при переміщенні. Наприклад, можна встановити значення 'move'. щоб курсор миші набув вигляду пересічних двосторонніх стрілок при перетягуванні елементу. snap Встановлюємо селектор (наприклад, snap: '#snapToMe') елемента, до якого прилипає перетаскується елемент. Також можна встановити значення true, щоб перетаскується елемент прилипав до будь-якого іншого перетягувати елементи сторінки. stack Якщо ви створюєте групу перетягувати елементи, наприклад, набір карт, то зазвичай один з них, як правило, останній що рухається об'єкт, потрібно мати у своєму розпорядженні поверх інших елементів групи. Встановивши опції stack значення в вигляді селектора, який відповідає групі елементів, ви можете добитися такої поведінки об'єктів. jQuery UI задасть властивості z-index елементів так, що поточний перетаскується буде розташовуватися зверху.
Змінимо наш приклад, щоб використовувати деякі опції:
Зверніть увагу на зміну поведінки перетягуваного об'єкта: його переміщення обмежене елементом #content. вид курсора змінюється, і сам перетаскується елемент прилипає до кордонів обмежує елемента.
Використовуємо допоміжний елемент
Допоміжний елемент використовується при перетягуванні замість оригінального елемента. Даний метод дуже зручний, якщо потрібно залишити оригінальний елемент на своєму місці, але в той же час дати можливість користувачеві перетягнути щось з його позиції в інше місце сторінки. Наприклад, надаємо користувачу можливість перетягувати колірної покажчик з палітри на об'єкт, для якого треба поміняти колір.
Для використання допоміжного елемента потрібно встановити опцію helper. Доступні значення для даної опції:
'Original' Значення за замовчуванням. Переміщається сам оригінальний елемент. 'Clone' Створюється копія елемента, яка переміщається. Функція Дана опція дозволяє створювати довільний допоміжний елемент. Ви визначаєте функцію, яка приймає об'єкт event і повертає розмітку допоміжний елемент. Даний елемент потім переміщається замість оригіналу.
Коли використовується значення 'clone' або функція, то допоміжний елемент руйнується після завершення операції перетягування. Однак ви можете використовувати подія stop. щоб отримати інформацію про допоміжному елементі (наприклад, його становище) перед знищенням.
Наступний приклад використовує функцію для створення призначеного для користувача допоміжний елемент для операції перетягування. Ми модифікуємо попередні приклади:
Події: реагуємо на переміщення
Часто, коли користувач перетягує елемент, потрібно знати, коли перетягування почалося і закінчилося, а також нове положення елемента. Ви можете прив'язати функції для обробки декількох подій, які генеруються операцією перетягування:
Список доступних подій:
create Генерується при створенні перетягуваного елемента викликом функції draggable (). start Генерується при початку процесу перетягування. drag Генерується при переміщенні курсору миші в процесі перетягування. stop Генерується, коли користувач відпускає кнопку миші після перетягування.
Обробник події повинен приймати 2 аргументи:
- Об'єкт події (event).
- Об'єкт jQuery UI, який представляє перетаскується елемент (ui).
Для об'єкта ui доступні 3 опції для отримання інформації про перетягувати елементи:
helper Об'єкт jQuery, який представляє допоміжний елемент для перетягування. position Об'єкт, який містить положення перетягуваного елемента щодо оригінальної позиції. Об'єкт має дві властивості: left (X координата від лівої межі елемента), і top (Y координата від верхньої межі елемента). offset Об'єкт, який містить положення перетягуваного елемента щодо документа. Як і об'єкт position. він має дві властивості left і top.
Змінимо наш приклад так, щоб він показував інформацію про кінцевому положенні перетягуваного елемента щодо документа, коли користувач відпускає кнопку миші:
Задаємо стилі для перетягуваного елемента
Іноді важливо надати перетягувати елементи інший вид. Наприклад, потрібно виділяти перетаскується елемент, або додати тінь для нього, щоб він виглядав піднесеним над сторінкою.
При перетягуванні елементу jQuery UI використовує для нього клас CSS ui-draggable-dragging. Ви можете встановити властивості для даного класу, щоб змінити стиль перетягуваного елемента.
Змінимо код нашого прикладу так, щоб квадрат міняв колір з червоного на зелений при перетягуванні:
Встановлюємо цільової елемент для перетягування
Ми тільки що описали, як зробити елемент перетягувати, і як обробляти події перетягування.
Але є інший спосіб реагувати на перетягування елементів. Можна створити цільовий елемент. який буде приймати перетягуються елементи.
Коли перетаскується елемент кидається над цільовим елементом, останній генерує подія drop. Написавши функцію обробник події drop. ви можете визначити, які елементи сприймаються цільовим елементом.
Ви також можете використовувати події over і out для визначення, коли перетаскується елемент знаходиться над цільовим і коли залишає його. Для більш детальної інформації дивіться документацію по jQuery UI.
Щоб зробити елемент цільовим, потрібно використовувати метод droppable ().
Змінимо код нашого прикладу, щоб створити цільовий елемент:
Ми створили функцію handleDropEvent () для реагування на подію drop. Так як ця подія перетягування, функція повинна приймати два аргументи: об'єкти event і ui.
Об'єкт ui має властивість draggable. значення якого відповідає перетягувати елементи. Наша функція використовує дане властивість разом з методом jQuery attr () для отримання ID перетягуваного елемента ( "makeMeDraggable").
висновок
У першій частині ми розглянули основні моменти для створення програми, що використовує технологію "перетащи-і-кинь". У наступній частині ми побудуємо закінчене просте додаток - дитячу гру по розкладці карт.
5 останніх уроків рубрики "jQuery"
Сьогодні ми б хотіли вам розповісти про бібліотеку TypeIt - безкоштовному jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна домогтися дуже реалістичного ефекту.
jQuery плагін для створення тимчасової шкали.
jQuery плагін для створення діаграми Ганта.
Приклад того як здійснити завантаження файлу через PHP і jQuery ajax.
перший) так, дійсно jq ui спрощує життя)
Спеціально написав каменти реалізації на чистому js на 1кб, а тут помилка «Рядок містить ділянку з багаторазово повторюваних символів» - все бажання допомогти відпало
Михайло Негер
SonikAbstain
у мене в демке червоний квадрат кудись загубився, після того як я його Тоскана! )))
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!