Плъзнете и пуснете с jQuery потребителски интерфейс

Преди да пристъпим към някои практически примери, нека да разгледаме методите Drag and Drop, които jQuery UI има за нас.
1- Метод с плъзгане ()
Плъзгащият се метод управлява елементите на HTML страница, които искате да преместите, този метод може да се използва по два различни начина:

 • $ (селектор, контекст) .draggable (опции) • $ (селектор, контекст) .draggable ("действие", параметри) 

Нека видим пример:
Първо трябва да включим необходимите файлове, често допускана грешка е да включим jQuery UI .js преди jQuery .js, не забравяйте, че jQuery е ядрото, а jQuery UI са само библиотеки, плъгини, джаджи, които без jQuery няма бих работил.

Извикваме метода:

 $ (function () {$ ("#draggable") .draggable ();}); 

И го свързваме със селектора, който ще бъде div с него.

Плъзнете ме наоколо

Ето пълния изходен код:

 jQuery UI Draggable - Функция по подразбиране
Плъзнете ме наоколо

2- droppable () метод
Методът на droppable управлява елементите на HTML страница, които искате да пуснете в област. Подобно на метода с плъзгане, той може да се използва по два различни начина:

 • $ (селектор, контекст) .droppable (опции) • $ (селектор, контекст) .droppable ("действие", параметри) 

Нека разгледаме пример за това:
Включваме файловете, добавяме стиловете, извикваме методите (тук ще използваме метода с плъзгане еднакво), последван от метода на droppable. Ето изходния код:

 jQuery UI Droppable - Функция по подразбиране
Плъзнете ме към моята цел
Пусни тук

И това ще бъде нашият изход в браузъра:

Ами ако сложим двете концепции заедно в по -сложен пример, нещо като количка за пазаруване? Да видим:
Първо включваме нашите файлове:

Добавяме някои стилове към нашата количка:

Ще използваме и метода на акордеон () от библиотеката на потребителския интерфейс на jQuery, за да направим нашата количка по -привлекателна, извикваме нашите методи и ги свързваме със селекторите, в този случай ще разширим цялата функционалност на метода с плъзгане до списък:

И така ще изглежда нашата количка за пазаруване:

За да можете да го тествате, ето пълния изходен код:

 jQuery UI Droppable - Демо за количка за пазаруване
Тениски

Риза Lolcat
Риза с чийзбургер
Риза Buckit


Чанти

Зебра на ивици
Черна кожа
Алигаторова кожа


Джаджи

iPhone
iPod
Ай Пад


Добавете вашите артикули тук

Хареса ли ви и помогнахте на този урок?Можете да възнаградите автора, като натиснете този бутон, за да му дадете положителна точка