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

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

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

Описание на идеята

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

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

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

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

Обикновено прехвърляне на файлове

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

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

В този пример мишката е избрала няколко файла на десктопа (ляво изображение). При избора, левият бутон на мишката беше натиснат и избраният “отиде” в кошницата. Самият браузър показва как се случва това, пише намек „копиране” и около създава контурите на преместените файлове.

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

Описание на изпълнението

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

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

Логиката на страницата е следната. Когато страницата е заредена в браузъра, в кошницата е зададен манипулатор на събитие "ondrop" - за да бъдат поставени, другите събития са блокирани и не се използват.

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

Този манипулатор просто показва списък с файлове. Техният брой е в event.dataTransfer.files.length и информация за всеки файл в event.dataTransfer.files [i] .name. Разработчикът определя какво да прави с получените данни, като в този случай списъкът на получените файлове просто се оформя.

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

DnD и външни данни

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

Ако обаче някой посетител направи „плъзгане и пускане“ на определено място във формуляра, полето за име на файл (файлове) ще се попълни автоматично.

Това е добро решение. Ако приемем, че на компютъра няма мишка, разбира се, е много трудно. Но е по-добре да се разработи потребителски интерфейс в обичайната версия и в DnD-реализацията.

DnD и вътрешни данни

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

Задачата за изчисляване на координатите на маркерите и техните размери се осъществява постоянно. Ръчното изчисление е добра практика, но интерактивната версия е по-удобна. Всички маркери винаги имат правоъгълна форма и, проследявайки „мишките“ събития от страните на елементите, можете да създадете възможност за автоматично преместване на елементите на правилното място на страницата или за промяната им.

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

Формално, това не е „влачене и пускане”, но ефектът е подобен и практичен. След като направихте универсални манипулатори за всеки елемент от страницата, можете да получите добър интерактивен резултат, да ускорите разработката и да опростите кода.

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

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

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

Сега нека разгледаме избора на елемент или елементи. Фактът на селекция е появата на контекстното меню, например целта е подравняване на избрания (ляв, десен, център), или разпределение на елементи вертикално или хоризонтално със същата стъпка, или промяна на техния размер (минимум, максимум).

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

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

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