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

Използване на технологията Дръпни и пусни (Дръпни и пусни) позволява на потребителя да премества различни обекти от един в друг, например елементи от един списък в друг. За да направите това, трябва да използвате два контрола: мивка и източник. Получателят е обектът, който ще приеме обекта източник (подвижен обект).

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

OnStartDrag(тип TStartDragEvent) - генерира се от изходния обект в началото на операцията. Параметри, предадени на манипулатора на събитието: обект приемник DragObject (тип TDragObject), обект източник (тип TObject).

OnDragOver(тип TDragOverEvent) - създава целеви обект, когато над него се постави плаващ обект. Параметри, предадени на манипулатора на събития: Обект-получател на подател (тип TObject), Обект източник-източник (тип TObject), Състояние на движение на състоянието (тип TDragState), X и Y (тип цяло число) - текущи координати на показалеца на мишката, Приемане (булев тип) ) знак за потвърждение на операцията по преместване. Състоянието на движение показва дали обектът, който се движи, е в зоната на приемника, дали се движи в нея, напуска ли я. Предадените параметри позволяват на обекта приемник да приеме или отхвърли обекта източник. Параметърът Accept е зададен на Trye, ако операцията за преместване е приета, False в противен случай.

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

onEndDrag (тип EndDragEvent) - Повишава се, когато приключи операция за плъзгане. Координатите X и Y на точката, където обектът източник Sender и обектът приемник Target се предават на манипулатора на събития.

За да създадете плъзгане и пускане, е достатъчно да реализирате две събития: OnDragDrop и OnDragOver със свойството DragMode, зададено на dmAutomatic. В противен случай началото на операцията по преместване, методът BeginDrag, трябва да бъде кодиран от програмиста.

За да консолидираме материала, ще създадем следното приложение. Поставете панелен компонент върху формуляра. Задайте свойството DragMode на Object Inspector на dmAutomatic. Изберете обекта на формуляра и използвайте инспектора на обекти, за да създадете следните събития:

Процедура TForm1.FormDragOver(Sender, Source: TObject; X, Y: Integer; State: TDragState; var Accept: Boolean); start if Source = Panel1 then Accept:= True else Accept:= False; край; процедура TForm1.FormDragDrop(Подател, Източник: TObject; X, Y: Цяло число); beginPanel1.Left:=X; Панел1.Гор:=Y; край;

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

Заключение: запознахме се с технологията Дръпни и пусни(плъзгане и пускане) и го използва на практика.

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

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

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

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

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

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

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

Лесно прехвърляне на файлове

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Където GUI елементите се изпълняват с помощта на псевдографика) с помощта на мишката или сензорния екран.

Методът се реализира чрез "улавяне" (чрез натискане и задържане на главния ( първи, по-често левия) бутон на мишката) на обект, показан на екрана на компютъра, програмно достъпен за такава операция, и преместването му на друго място (за промяна на местоположението) или „хвърляне“ върху друг елемент (за извикване на съответния действие, предвидено от програмата). По отношение на прозорците (също способни да се движат по подобен начин), този термин обикновено не се използва.

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

Следните елементи на интерфейса могат да бъдат обекти за преместване: икони на работния плот (икони), плаващи ленти с инструменти, програмни преки пътища в лентата на задачите (започвайки с Win XP), TreeView елементи, текстов низ, DataGridView клетка., също OLE елементи. Обектите могат да се движат както в рамките на определена област, в рамките на един прозорец, между панелите на един прозорец, така и между различни прозорци.

Събитието за плъзгане трябва да бъде задействано от някакво действие на потребителя. Най-често това действие е натискане на левия бутон на мишката върху елемент (това събитие се нарича MouseDown), който може да бъде преместен в неговия контейнер. Някои компоненти имат свои собствени стартови събития за плъзгане и пускане - например TreeView има събитие ItemDrag.

Фондация Уикимедия. 2010 г.

Вижте какво е "плъзгане и пускане" в други речници:

Дръпни и пусни- 〈[ dræg ənd drɔ̣p] n.; ; unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird [англ. плъзнете „ziehen“ + и „und“ + пуснете „fallen… … Universal-Lexikon

Формата за извършване на всяко действие в графични интерфейсипотребител, което предполага използването компютърна мишка. Преведено от английски означава буквално: плъзгане и пускане. Действието се извършва чрез опериране върху видимото на екрана ... ... Речник на бизнес термините

Дръпни и пусни- (компютър) За преместване на икона, файл и т.н. по екрана с помощта на мишката и освобождаването му на различно място (прилагателно dragˈ и dropˈ) Основен запис: плъзгане … Полезен английски речник

Дръпни и пусни- IT за преместване на нещо от една област на екрана на компютъра в друга с помощта на мишката: »Софтуерът ви позволява да плъзгате и пускате елементи за изображения, текст и т.н. където пожелаете. Основен запис: drag … Финансови и бизнес условия

Дръпни и пусни- UK US глагол n.; Ген.: ; мн.: unz.; EDV〉 das Anklicken eines Objektes, das auf dem Computerbildschirm (in eine andere Datei bzw. an eine andere Stelle) verschoben u. dort wieder losgelassen wird)