Превуците и испустите помоћу јКуери корисничког интерфејса

Пре него што пређемо на неке практичне примере, погледајмо методе Драг анд Дроп које јКуери УИ има за нас.
1- Метода која се може превући ()
Метода која се може превући управља елементима ХТМЛ странице коју желите да преместите, овај метод се може користити на два различита начина:

 • $ (селектор, контекст) .драггабле (опције) • $ (селектор, контекст) .драггабле ("акција", параметри) 

Погледајмо пример:
Прво морамо укључити потребне датотеке, честа грешка која се прави је укључивање јКуери УИ .јс пре јКуери .јс, запамтите да је јКуери језгро, а јКуери кориснички интерфејс само библиотеке, додаци, виџети, који без јКуери неће би радио.

Позивамо се на метод:

 $ (фунцтион () {$ ("#драггабле") .драггабле ();}); 

И повезујемо га са селектором који ће бити див са њим.

Вуци ме

Ево комплетног изворног кода:

 јКуери УИ Драггабле - Подразумевана функционалност
Вуци ме

2- дроппабле () метода
Метода која се испушта управља елементима ХТМЛ странице које желите да испустите у област. Као и метода која се може превући, може се користити на два различита начина:

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

Погледајмо пример овога:
Укључујемо датотеке, додајемо стилове, позивамо методе (овде ћемо једнако користити методу која се може превући), а затим методу која се може испустити. Ево изворног кода:

 јКуери УИ Дроппабле - Подразумевана функционалност
Одвуци ме до моје мете
Сврати овде

А ово би био наш излаз у прегледачу:

Шта ако оба концепта спојимо у сложенији пример, нешто попут корпе за куповину? Хајде да видимо:
Прво укључујемо наше датотеке:

У корпу додајемо неке стилове:

Такође ћемо користити метод хармонике () из библиотеке корисничког интерфејса јКуери да нашу кошарицу учинимо привлачнијом, позивамо наше методе и повезујемо их са селекторима, у овом случају ћемо проширити сву функционалност методе која се може превући на листу:

Овако би изгледала наша корпа за куповину:

Да бисте могли да га тестирате, ево комплетног изворног кода:

 јКуери УИ Дроппабле - Демо за куповину
Мајице

Лолцат Схирт
Цхеезебургер Схирт
Буцкит Схирт


Торбе

Зебра Стрипед
Црна кожа
Кожа алигатора


Направа

иПхоне
иПод
иПад


Додајте своје ставке овде

Да ли вам се допао и помогао овај водич?Можете наградити аутора притиском на ово дугме да бисте му дали позитиван поен