Как да плъзнете и вземете изображения с потребителския интерфейс на JQuery

Ще покажем пример за как да премествате изображения из уеб страница и да ги улавяте в div, за това ще използваме JQuery UI. Ще използваме плъзгащ се Y отпадащ. Ще се използват минималните стилове, този урок няма за цел да има приятна среда за тестване, а по -скоро да види как работят коментираните функции. Кодът няма големи усложнения.

В примера ще имаме няколко изображения и div с рамка, целта е да преместите всяко изображение в div и да го хване, ще видим кодовете, започващи с HTML.

HTML код

Ще оцените, че HTML кодът е кратък, точно това, което е необходимо, важната част от урока не се намира тук.

 Плъзнете  

В секцията head импортираме необходимия стил, скрипта, който създаваме, и скриптовете на потребителския интерфейс на JQuery. В тялото просто добавете 2 изображения и div, div има идентификатор и изображенията с клас, за да можем да ги обработваме в нашия скрипт.

CSS код

Както казахме в началото, стиловете не са приоритет, ще се използват само тези, необходими за тази задача.

 #frame {width: 270px; мин-височина: 60px; марж: авто; рамка: 1px плътно черно; подложка: 5px; } .dropped {position: static! important; } 

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

JQuery код

Ще поставим кода по -долу, за да го обясним по -късно.

 $ (document) .ready (function () {$ (". moveImage"). draggable (); $ ("#box"). droppable ({drop: function (event, ui) {ui.draggable.addClass (" отпадна "); $ (this) .append (ui.draggable);}});})

Ние правим класа преместване на изображение draggable, който е класът, добавен към нашите изображения в HTML. Тази задача вече ни позволява да преместваме или плъзгаме нашите изображения из страницата, но само това, с този код все още няма да бъде "заснето". За това ще използваме droppable в div с id картина, в рамките на droppable правим изображението, намиращо се в div, да го добавим към отпадналия клас (помнете CSS, без статичната позиция няма да работи добре) и по -късно това се добавя като съдържание на div, за това използваме append.

Сега ще тестваме примера, на следното изображение виждаме как започва страницата:

Преместването на изображение ще изглежда така:

И накрая, когато имаме 2 изображения в div, "страницата" ще изглежда така:

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

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