Превуците и испустите: како управљати елементима корисничког интерфејса

Најлакше је узети и ставити нешто, него написати оно што требате узети и гдје га ставити. Наравно, без миша, или сличног уређаја, нећете бирати ништа и нећете ништа специфицирати, али чак иу тренутном стању ствари, користећи идеју „повуци и испусти“ је врло природно и удобно.

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

Опис идеје

Изабери, крени и стави - идеја је природна и удобна. Невероватно је да се није родила када је миш постао незаменљив компјутер за додатну опрему.

Најочигледнији примјер је одабир производа у онлине трговини. Понесите жељени производ мишем и повуците га до корпе за куповину - једноставно, природно и повољно. Преузимање датотека: узимање документа изван прозора претраживача и његово стављање на елемент странице, чиме се иницира пријенос документа на послужитељ, такођер је практична идеја.

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

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

Једноставан пренос датотека

“Повуци и пусти”: пријевод са енглеског на руски буквално звучи “повуци и испусти”. У пракси, то звучи и делује боље: бира, преноси и ослобађа - једноставно и природно.

Имплементација на страници пренос датотека на страницу, на сервер или за друге сврхе је врло једноставна.

У овом примеру, миш је изабрао неколико датотека на радној површини (лева слика). Приликом одабира, притиснута је лева типка миша, а одабрана “отишла” у кошару. Сам претраживач је показао како се то дешава, написао је „копирање“ и око креирао контуре премештених датотека.

Када се миш појавио изнад корпе, посетилац је пустио леви тастер миша, повуци се и испусти догађај, а на страници веб сајта (доња слика) ЈаваСцрипт код је био у стању да прими и обради све датотеке које је посетилац дао страници (веб сајту).

Опис имплементације

Код који изводи ову процедуру је врло једноставан. Чак и почетник може да га понови у свим случајевима.

Овде, кориснички интерфејс је представљен са две ознаке: сцПлацеФиле (ово је сама корпа, где треба да ставите фајлове) и сцПлацеФилес (ово је резултат обраде фајлова, у овом случају њихове листе).

Логика странице је следећа. Када се страница учита у претраживачу, у корпи је додељен "ондроп" руковалац догађаја - да се стави, остали догађаји се блокирају и не користе.

Страница ради у регуларном моду, али чим посјетитељ одабере датотеку (е) и повуче их до слике корпе, то јест, на сцПлацеФиле ознаци, покреће се догађај „датотеке стигао“.

Овај руковалац једноставно приказује листу датотека. Њихов број је у евент.датаТрансфер.филес.ленгтх, а информације о свакој датотеци у евент.датаТрансфер.филес [и] .наме. Програмер одређује шта да ради са примљеним подацима, у овом случају се једноставно формира листа примљених датотека.

Након обраде, догађај се блокира и не дистрибуира. Ово је неопходно да се претраживач не упушта у аматерске активности и не омета у обради примљених информација.

ДнД и екстерни подаци

Отпремање слика на сервер повлачењем и испуштањем је уобичајена пракса коришћења ове технологије. По правилу, програмер креира образац за отпремање датотеке (1), која ради на уобичајени начин (2). Посетилац може нормално да бира фајлове и отпреми их.

Међутим, ако посетилац на одређеном месту на обрасцу "повуче и испусти", поље имена датотеке (датотеке) ће се аутоматски попунити.

Ово је добра одлука. Под претпоставком да на рачунару нема миша, наравно, веома је тешко. Међутим, боље је развити кориснички интерфејс у ​​уобичајеној верзији иу ДнД-имплементацији.

ДнД и интерни подаци

Брига о интересима посетиоца је увек важна, али и проблем девелопера. Можете имплементирати повлачење и испуштање не само стандардним средствима, већ и руковањем догађајима на елементима странице.

Задатак израчунавања координата ознака и њихових величина се стално јавља. Ручни прорачун је добра пракса, али је интерактивна верзија практичнија. Сви тагови увек имају правоугаони облик и, пратећи "миша" на странама елемената, можете креирати могућност да аутоматски померате елементе на право место на страници или да их мењате.

Руковање догађајима кликом миша - меморирање координата локације клика, на примјер, једне од страна елемента Померање миша - страна се креће у правом смеру. Отпуштање тастера миша - страна се зауставља, а њене координате се мењају. Тако можете да промените положај елемента или његову величину.

Формално, ово није “повуци и испусти”, али је ефекат сличан и практичан. Након што сте направили универзалне руковатеље за било који елемент странице, можете добити добар интерактивни резултат, убрзати развој и поједноставити код.

Визуелно и ручно програмирање

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

Све то заједно отежава креирање страница, али применом идеје „повуци и испусти“ у свом стандардном облику, користећи своје догађаје, комбинујући ту идеју са обичним догађајима на елементима, можеш имплементирати механизам којим ће се креирати страница визуелно.

Сада размотримо избор елемента или елемената. Чињеница селекције је изглед контекстног менија, на пример, циљ је поравнање изабраног (лево, десно, центар), или дистрибуција елемената вертикално или хоризонтално са истим кораком, или промена њихове величине (минимум, максимум).

Аутоматско прерачунавање координата и величина пожељније је од ручног. Мање грешака - бржи циљ. Поред тога, можете направити страницу у једном претраживачу, сачувати позицију и величину елемената. Отварањем ове странице на паметном телефону можете исправити вриједности координата и величина и запамтити их за одређени модел паметног телефона или верзију прегледника.

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

Ако дозволите посетиоцу да самостално изврши ове поступке, као и да одабере жељене елементе странице међу онима које је обезбедио програмер, можете да обезбедите компатибилност између претраживача и потребну функционалност странице, узимајући у обзир погледе корисника.