Методът плъзгане и пускане е свързан с възможностите. Създаване на прост HTML5 интерфейс „drag & drop“. Как да плъзнете текст от едно приложение в друго

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

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

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

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

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

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

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

За да консолидираме материала, ще създадем следното приложение. Поставете компонента Panel върху формуляра. Задайте свойството 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: Цяло число); начало Panel1.Left:= X; Панел1.Гор:= Y; край;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Техниките за плъзгане и пускане са се развили в продължение на много години. Не е изненада, че с нарастващия брой програмисти, разработващи плъгини с отворен код (като jQuery), старите методи се възраждат. JavaScript библиотеката е много бърза и предлага много подобрения в тази ера на уеб технологиите.

В този урок ще направим скрипт, който можете да използвате за създаване на динамични правоъгълници с плъзгане и пускане на вашия уебсайт. Процесът се управлява от jQuery. Такива скриптове спестяват време, като предоставят готова функционалност! И библиотеката за плъзгане и пускане може да се използва в други проекти.

Първо, нека подготвим малък уебсайт за проекта. В папката на проекта трябва да създадете две директории с забележителните имена "js" и "css" и празен файл index.html. Кодът ще бъде много прост, така че да има ясна представа за работата и да има точка за по-нататъшно развитие.

По-долу е кодът за нашия HTML файл. В глава глававключваме 3 скрипта. Основният jQuery скрипт ще бъде зареден от сървъра на Google Code. Включен е и нашия стилов файл style.css, който съдържа основните свойства за формиране външен виднашия документ.

Плъзни ме Да, да. Точно аз. Можете да плъзнете и мен ( zIndex: 200, непрозрачност: .9 )

P.S.: можете да ме оставите навсякъде!

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

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

Body,html (font-family:Calibri, sans-serif; background:#eaf3fb; font-size:12px; height:1000px; line-height:18px; ) p (height:30px; )

Селектори тяло, htmlсе използват само за демо страницата. И цялото съдържание е поставено в два плъзгащи се правоъгълника.

Dv1 (ширина:200px; цвят на фона:#eff7ff; граница:1px плътен #96c2f1; позиция:абсолютен; ляво:100px; горе:100px;) .dv1 h2 (цвят на фона:#b2d3f5; подложка:5px; шрифт- семейство:Georgia, "Times New Roman", Times, serif; font-size:1.0em; text-transform:uppercase; font-weight:bold; color:#3a424a; margin:1px; cursor:move; ) .dv1 div (padding:5px; margin-bottom:10px;) .dv2 (background-color:#f6ebfb; border:1px solid #a36fde; width:550px; position:absolute; cursor:move; left:400px; top:230px; ) .dv2 h2 (цвят на фона:#eacfe9; разстояние между буквите:-0.09em; размер на шрифта:1.8em; тегло на шрифта: получер; подложка:15px; поле:1px; цвят:#241f24; курсор:преместване; ) .dv2 .content2 (padding:5px; margin-bottom:10px;)

И за двата класа .dv1 и .dv2 използваме абсолютно позициониране. Това не е необходимо и вероятно не е най-важното По най-добрия начинза позициониране на плъзгащи се правоъгълници. За нашия пример обаче това позициониране има смисъл, тъй като всеки път, когато страницата се опреснява, правоъгълниците се инсталират на определени места.

Освен това шрифтовете и цветовете са различни за правоъгълниците, за да се види по-лесно разликата.

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

Два JavaScript файла съдържат целия код, необходим, за да работи. Ще пропуснем подробностите за работата с jQuery, тъй като това е извън обхвата на урока. Нека обърнем внимание на файла jquery.dragndrop.js.

Ред 22 дефинира функцията Drags.

$.fn.Drags = function(opts) ( var ps = $.extend(( zIndex: 20, opacity: .7, манипулатор: null, onMove: function() (), onDrop: function() ( )), opts );

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

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

Var dragndrop = ( drag: function(e) ( var dragData = e.data.dragData; dragData.target.css(( ляво: dragData.left + e.pageX - dragData.offLeft, горе: dragData.top + e.pageY - dragData.offTop )); dragData.handler.css(( курсор: "преместване" )); dragData.target.css (( курсор: "преместване" )); dragData.onMove(e); ), капка: функция( e) ( var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css(( "opacity": "" )); dragData.handler.css("cursor", dragData. oldCss.cursor); dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("mouseup", dragndrop.drop); ) )

Нашите функции са манипулирани CSS позиционираневсеки обект. Промяната на абсолютното позициониране на вашите обекти няма да повлияе на това как работи кодът ви, тъй като всяка функция на JavaScript променя какъвто и стил да е дефиниран за обекта.

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

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

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

Първата стъпка е да зададете опциите при извикване на функцията. Не забравяйте да зададете името на манипулатора. С него казваме на jQuery кой манипулатор да използва, когато бутонът на мишката е натиснат в определена област на документа. Името на манипулатора може да бъде клас или ID атрибут.

Нашата първа функция има два манипулатора на събития onMove и onDrop. И двете извикват нови функции, които се предават на текущото събитие като променливи. Това е мястото, където HTML кодът в правоъгълника се манипулира, за да се актуализира с всяко движение. Това е страхотен ефект за демонстриране на това как можете да контролирате процес с помощта на прости jQuery събития.

Във втората функция използваме параметрите z-Index и opacity. Можете да добавите други CSS свойства? но това ще изисква преработване на JavaScript кода, така че настройките да бъдат проверени. Например, можете да подадете различен стил на шрифт или стойности за височината и ширината на движещ се правоъгълник - много интересен трик!

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

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

Така че вижте документацията на jQuery, за да използвате библиотечните функции.

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

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

Този преглед на HTML плъзгане и пускане включва описание на интерфейсите, основни стъпки за добавяне на поддръжка за плъзгане и пускане към приложение и обобщение на оперативната съвместимост на интерфейсите.

Забележка: Нито събития dragstart, нито dragend се задействат при плъзгане на файл в браузъра от операционната система.

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

Изработване на елемент влаченеизисква добавяне на draggable атрибут и ondragstart глобален манипулатор на събития, както е показано в следния примерен код:

функция dragstart_handler(ev) ( // Добавяне на идентификатора на целевия елемент към обекта за прехвърляне на данни ev.dataTransfer.setData("text/plain", ev.target.id); ) window.addEventListener("DOMContentLoaded", () => ( // Получаване на елемента чрез id const element = document.getElementById("p1"); // Добавяне на слушателя на събития ondragstart element.addEventListener("dragstart", dragstart_handler); ));

Този елемент може да се плъзга.

За повече информация вижте:

Манипулаторът за събитието drop е свободен да обработва данните за плъзгане по специфичен за приложението начин.

Обикновено приложението използва метода getData(), за да извлече елементи с плъзгане и след това да ги обработи по съответния начин. Освен това семантиката на приложението може да се различава в зависимост от стойността на