Техніка Drag-n-Drop з використанням jQuery
У цьому уроці ми зробимо скрипт, який можна буде використовувати для створення динамічних прямокутників з технікою "перетягни та кинь" на своєму веб-сайті. Процес керується jQuery. Такі скрипти зберігають час, надаючи готовий функціонал! А бібліотеку "перетягни та кинь" можна буде використовувати в інших проектах.
Готуємо контент
Насамперед підготуємо невеликий сайт для проекту. У папці проекту потрібно створити два каталоги з примітними іменами"js" та"css" та порожній файлindex.html. Код буде дуже простий, щоб склалося чітке уявлення про роботу і з'явилася точка для подальшого розвитку.
Нижче наводиться код нашого HTML-файлу. У розділі head ми включаємо 3 скрипти. Основний скрипт jQuery підвантажуватиметься з сервера Google Code. також підключається наш файл стилів style.css , який містить основні властивості формування зовнішнього вигляду нашого документа.
Усередині розділу body розміщено лише два блоки div, які містять обидва прямокутники. Код досить простий та зрозумілий. Всередині кожного прямокутника розміщені заголовки з класамиhandler таhandler2. Це важливо, тому що при перетягуванні кожен прямокутник поводиться по-своєму.
Встановлюємо CSS
Код HTML дуже простий. Якщо вам зрозуміла основна розмітка, то і стилі CSS також не будуть складними. В основному визначаються поля, відступи та кольори.
Селектори body,html використовуються лише для демонстраційної сторінки. А весь контент розміщується у двох прямокутниках, що перетягуються.
Для обох класів .dv1 та .dv2 ми використовуємо абсолютне позиціонування. У цьому немає необхідності і, ймовірно, це не найкращий спосіб для позиціонування перетягуєтьсяпрямокутників. Однак для нашого прикладу таке позиціонування має сенс, тому що при кожному оновленні сторінки прямокутники встановлюються у певні місця.
Також шрифти і кольори відрізняються прямокутників, щоб легше було побачити різницю.
На рядку 22 відбувається визначення функціїDrags.
Тут встановлюється змінна, що повертається, і дані ініціалізації для Drags. Такий спосіб дуже широко використовується під час роботи з jQuery для передачі опцій іншим функціям. Усередині ми встановлюємо змінні для всіх доступних опцій для прямокутників, що перетягуються.
Наступна частина коду включає обробники подій для змінноїdragndrop. Обидві події drag і drop викликають функції передачі параметрів події у них. Ці події відбуваються, коли ви натискаєте кнопку миші, щоб перетягнути об'єкт, а потім відпускаєте її.
В іншому коді відбувається перевірка оброблювача та косметичні зміни інших стилів. Тут можна додати зміну прозорості, шрифту та його кольору або додати нові параграфи.
Функції Drag/Drop
У другому файлі fn.js міститься дуже простий код. Ми чекаємо на повне завантаження документа, після чого викликаємо наші функції. Визначаються два екземпляри функції Drags, яка розбиралася раніше.
У нас є два блоки, що переміщаються з класами .dv1 і .dv2 . Якщо потрібно залишити один блок, що переміщається, то потрібно просто видалити другу частину коду. Додавання ще одного блоку, що переміщається, також здійснюється просто. Потрібно лише додати нову функцію у цьому файлі.
Насамперед потрібно встановити опції при виклику функції. Обов'язково необхідно встановити ім'я оброблювача. З його допомогою ми повідомляємо jQuery, який обробник використовувати при натисканні кнопки миші впевної сфери документа. Як ім'я обробника може бути клас або атрибут ID.
У нашій першій функції є два обробники подій onMove іonDrop. Обидва викликають нові функції, що передаються у поточну подію як змінні. Тут виконується маніпулювання HTML-кодом у прямокутнику для оновлення при кожному русі. Це чудовий ефект для демонстрації того, як можна керувати процесом за допомогою простих подій jQuery.
Висновок
В результаті невеликої роботи ми отримали у своє розпорядження чудовий інтерфейс з функцією "перетягни та кинь". jQuery надає величезні переваги для розробників, які прагнуть використати у своїх проектах старі методи.
В результаті ми отримали не тільки функції обробники подій, але й можемо передавати нові змінні в блоки, що перетягуються. Це відкриває нові змогу творчості. Демонстрація до уроку містить лише малюнок те, що можна робити з допомогою такого коду.
Отже, вивчайте документацію jQuery для використання бібліотечних функцій.
Даний урок підготовлений для вас командою сайту ruseller.com Джерело уроку: www.onextrapixel.com/2011/02/16/master-drag-and-drop-technique-using-jquery/ Переклав: Сергій Фастунов Урок створено: 19 Лютого 2011 Переглядів: 54380 Правила передруку
5 останніх уроків рубрики "jQuery"
Анімація набір тексту на jQuery
Сьогодні ми хотіли б вам розповісти про бібліотеку TypeIt — безкоштовний jQuery плагін. З її допомогою можна імітувати набір тексту. Якщо все налаштувати правильно, то можна досягти дуже реалістичного ефекту.
Тимчасова шкала на jQuery
jQuery плагін для створення тимчасової шкали.
Малюємо діаграму Ганта
jQuery плагін для створення діаграми Ганта.
AJAX та PHP: завантаження файлу
Приклад того, як здійснити завантаження файлу через PHP і jQuery ajax.