Плъзгане и пускане елементи от интерфейса с курсора на мишката най-вероятно е най-интуитивен начин за взаимодействие на потребителите със сайта или приложението. Хората често се опитват да използват влачене и пускане с курсора на мишката за такива действия:

• Преместването на имейл съобщения в папки.
• Промяна на реда на елементите в списъците.
• Подвижни обекти в игри като игри с карти или пъзели.

В този урок ще разгледаме как да се създаде интерфейс с техниката на това плъзгане и пускане на JQuery и изграждане на цялостно приложение: детска игра на карти за оформление.

За да добавите плъзнете & капка функционалност на страниците си, трябва да включите JQuery и JQuery UI плъгин библиотека. JQuery UI е фантастично допълнение към JQuery и включва голям брой интерфейсни джаджи за изпълнение на различни визуални ефекти и алгоритми за работа, включително и за технологията плъзнете & капка.

Най-лесният начин за свързване на библиотеката - използвайте МПС на Google:

Осъществяване плъзгане елемент

Когато добавите елемент към вашата уеб страница (например, Разделение или изображение), тя е фиксирана в определено положение. Въпреки това, с помощта на JQuery UI е лесно да се направи плъзгане с курсора на мишката.

За да направите елементите се движат, просто се обадете на метода на плъзгане () върху него. Ето как:

Добави влачене и пускане опции

Метод плъзгане () може да премине много различни опции за персонализиране на поведението на елемента при плъзгане:

Някои често използвани опции от един дълъг списък:

ограничаване По подразбиране можете да влачите и пускате елементи на страницата. Но вие можете да се ограничи движението на определена част от него. За опции могат да бъдат използвани за ограничаване стойности: "майка" ограничава площ изместване родител елемент "документ" Ограничаване област се движи цялата "прозореца" на страница ограничава за избор на зона прозорец на браузъра изместване ограничава изместването на площ избран елемент масив от 4 стойности ([x1, y1, x2, y2 ]) ограничава регион изместване дефинирани правоъгълник курсора Промени курсора при преместване. Например, може да се настрои да се "движат". така че курсора на мишката е придобил формата на пресичащи двустранно стрелка, когато плъзнете елемент. Инсталиране на модула селектор (например, модула: "#snapToMe) елемент, към който се придържа повлече елемент. Също така е възможно да се установи истинската стойност на влачат позиция остана за всяка друга страница плъзгане елемент. стека Ако създадете група от влачене и пускане елементи, като например набор от карти, обикновено е един от тях, обикновено последният да се движи обектът трябва да бъде поставен на върха на други елементи от групата. Задайте настройките стека стойност като селектор, което съответства на една група от елементи, можете да постигнете поведението на обектите. JQuery UI пита свойства Z-индекс на елементи, така че текущата повлече Продуктът се поставя на върха.

Да променим нашия пример да използвате някои от опциите:

Обърнете внимание на промяната в поведението на влачат обект: неговото движение е ограничено елемент #content. курсора промени и повлече т себе си се придържа към границите на очертаващ член.

Използвайте спомагателен елемент

Спомагателният елемент се използва вместо оригинала при плъзгане елемент. Този метод е много полезен, ако имате нужда да напусне оригинален елемент в място, но в същото време дава възможност на потребителя да влачите и пускате нещо от поста си в друга позиция на страницата. Така например, дават възможност на потребителя да влачите и пускате цветовата палитра с показалеца на обекта, за който искате да промените цвета.

За да използвате помощен елемент, за да инсталирате опция помощник. Наличните стойности за този вариант:

"Original" е по подразбиране. Той се движи много оригинален елемент. "Клонинг" създава копие елемент, който се движи. Функция Тази функция ви позволява да създавате произволен спомагателни функции. Вие дефинирате функция, която използва обект на събитието, и връща оформлението на помощен елемент. Този елемент се премества на мястото на оригинала.

Когато стойността е "клон" или функция, спомагателния елемент се разрушава след операцията за плъзгане. Въпреки това, можете да използвате стоп събитие. за да получите информация за отделен елемент (например местоположението му) преди да ги изхвърлите.

Следващият пример използва функцията за създаване на потребител спомагателен елемент за функционирането на плъзгане. Ние променят предишните примери:

Събития: реагират на движение

Често, когато един потребител изтегли даден елемент, трябва да знаете, когато плъзнете започна и завърши и новата позиция на елемента. Можете да зададете функции за обработка на множество събития, които се генерират от операцията на плъзгане:

В списъка с налични събития:

Изпускани създаде плъзгане елемент при създаването на извикване на функция плъзгане (). Изпускани старт в началото на процеса на плъзгане елемент. плъзгане генерира, когато поставите курсора на мишката, докато плъзгате. спирка се генерира, когато потребителят освободи бутона на мишката, след като го плъзгате.

манипулатор на събитието трябва да приема два аргумента:

• Обектът събитие (събитие).
• JQuery UI обект, който се проточи т (ПИ).

UI Обект 3 налични опции за получаване на информация за плъзгане елемент:

помощник JQuery обект, който представлява помощен елемент за плъзгане. позиция А, който съдържа член плъзгане относителното положение на първоначалното положение. Обектът се състои от две свойства: ляво (X координата на лявата граница елемент) и отгоре (Y координата на горния елемент на границата). компенсира обект, който съдържа позицията на влачат елемент по отношение на документа. Както позицията на обекта. Той има две свойства на ляво и отгоре.

Сменяме нашия пример, така че да показва информация за крайната позиция на плъзгане елемент на документа, когато потребителят освободи бутона на мишката:

Държим да уточним стила да влачите и пускате елементи

Понякога е важно да се даде друг вид влачене и пускане елементи. Например, необходимо е да се разпределя влачат елемента, или да добавите сянка към него, за да изглежда по-горе вдигна страницата.

Когато плъзнете елемент клас на JQuery UI използва CSS UI-плъзгане-плъзгане за него. Можете да зададете свойствата на този клас, за да промените стила на влачене и пускане елементи.

Промяна на кода на нашия пример, така че на площада променя цвета си от червено до зелено, когато плъзнете:

Определете целта елемент за плъзгане

Ние току-що е описано как да се направи един елемент плъзгане, и как да се справя случай плъзгане.

Но има и друг начин да се отговори на влачите и пускате елементи. Можете да създадете насочване елемент. който ще се отпадналите елементи.

Когато повлече Продуктът се спуска върху целевата елемент, последният генерира капка събитието. Писане събитие манипулатор функция капка. може да се определи какви елементи се възприемат от елемента цел.

Можете също да използвате отново и от събития, за да се определи кога плъзгане елемент е над целта, а когато го оставяте. За повече информация, вижте документацията на JQuery UI.

За да направите елемента цел, трябва да използвате за капки () метод.

Промяна на кода на нашия пример, за да се създаде целева елемент:

Ние създадохме функция handleDropEvent (), за да се отговори на събитието капка. Тъй като това е събитие, влача, функцията трябва да вземе два аргумента: обект на събитието, както и потребителския интерфейс.

Обектът разполага с UI имот плъзгане. стойност, която съответства на влачат елемента. Нашата функция използва този комплекс във връзка с (метод JQuery ATTR) до получаване на ID плъзгане елемент ( "makeMeDraggable").

заключение

В първата част разгледахме основните точки, за да създадете приложение, което използва технологията на "влачене и пускане". В следващата част ще се изгради цялостна просто приложение - детска игра на карти за оформление.

5 урока последната колона "JQuery"

Днес бихме искали да ви разкажа за TypeIt библиотека - безплатно JQuery плъгин. Можете да го използвате, за да се симулира пишете. Ако всичко е настроен правилно, то е много реалистичен ефект може да се постигне.

Имам в демото на Червения площад, където нещо се изгуби след като бях Тоскана! )))

До получаване на информация от два канала (зрение и слух) на ефективността на обучението далеч по-добър живот от книги. А домашните задачи и онлайн тестове ще ви позволи да мисля постоянно в целевия език и веднага провери знанията си!

Ако искате по-дълго време, за да проучи как да се HTML, че ме има, за което трябва добра новина!

Ако вече сте се научили HTML и искат да се движи напред, следващата стъпка ще бъде да се проучи CSS технологията.

Ако искате да се разбере концепцията на домейн и хостинг, да научат как да се създаде база данни, да качвате файлове към уеб сайт чрез FTP сървър, създаване на поддомейни, да конфигурирате пощенските кутии за сайта и мониторинг на посещаемостта, този курс е разработен специално за вас!

Свързани статии

• ФИА забрани използването на технологията успя изпускателната изгорял дифузьор