Како превлачити и преузимати слике помоћу ЈКуери корисничког интерфејса

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

У примеру ћемо имати неколико слика и див са ивицом, циљ је да сваку слику преместимо у див и да је ухвати, видећемо кодове који почињу са ХТМЛ -ом.

ХТМЛ код

Схватит ћете да је ХТМЛ код кратак, само оно што је потребно, важни дио водича се овдје не налази.

 Превуците  

У одељку хеад увозимо неопходни стил, скрипту коју креирамо и ЈКуери УИ скрипте. У тело, једноставно додајте 2 слике и див, див има ид и слике са класом, тако да их можемо обрадити у нашој скрипти.

ЦСС код

Као што смо рекли на почетку, стилови нису приоритет, користиће се само они неопходни за овај задатак.

 #оквир {ширина: 270пк; мин-висина: 60пк; маргина: ауто; ивица: 1пк пуна црна; паддинг: 5пк; } .дроппед {поситион: статиц! импортант; } 

Обруб се додаје у див и он је центриран, тако да можемо видети када снима слику. Одбачена класа је статична, овај део је најважнији, јер ће се ова класа додати на слику када је ухвати див.

ЈКуери код

Код ћемо ставити испод, да бисмо га касније објаснили.

 $ (доцумент) .реади (фунцтион () {$ (". мовеИмаге"). драггабле (); $ ("#бок"). дроппабле ({дроп: фунцтион (евент, уи) {уи.драггабле.аддЦласс (" испуштено "); $ (тхис) .аппенд (уи.драггабле);}});})

Ми чинимо час покретна слика драггабле, што је класа додата нашим сликама у ХТМЛ -у. Овај задатак нам већ омогућава померање или превлачење слика по страници, али само то, са тим кодом још не би било „снимљено“. За ово ћемо користити дроппабле у див -у са ид -ом слика, унутар дроппабле -а, направимо слику која се налази у див -у да је додамо испуштеној класи (запамтите ЦСС, без статичког положаја не би добро функционисао), а касније се то додаје као садржај див -а, за ово користимо аппенд.

Сада ћемо тестирати пример, на следећој слици видимо како страница почиње:

Померање слике ће изгледати овако:

И коначно, када имамо 2 слике у див -у, "страница" ће изгледати овако:

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

БелешкаАко желите да сазнате више о ЈКуери УИ, посетите њихову страницу. Наћи ћете више могућности и видећете примере.