Създаване на прост HTML5 интерфейс „drag & drop“. Плъзгане и пускане: начин за работа с елементи на потребителския интерфейс 13 технология за плъзгане и пускане

182

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

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

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

Операциите с плъзгане и пускане, дефинирани от спецификацията HTML5, обикновено се изпълняват с помощта на собствени механизми на операционната система. Ако използвате механизма за плъзгане и пускане на jQuery UI, тогава е по-добре да деактивирате еквивалентните HTML5 функции, за да избегнете конфликти. За да направите това, задайте атрибута за плъзгане на елемента body на документа на false.

Настройване на взаимодействието с възможност за плъзгане

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

Свойства на взаимодействие с възможност за плъзгане Описание на имота

ос	Ограничава способността за движение в определени посоки. Стойността по подразбиране е false, което означава, че няма ограничение, но можете също да посочите стойност "x" (преместване само по оста X) или "y" (преместване само по оста Y)
задържане	Ограничава местоположението на премествания елемент до определена област на екрана. Типовете поддържани стойности са описани в таблицата по-долу, използвайки съответния пример. Стойността по подразбиране е false, което означава, че няма ограничения
забавяне	Указва колко дълго трябва да се плъзга елемент, преди да се премести. Стойността по подразбиране е 0, което означава, че няма забавяне
разстояние	Определя разстоянието, на което потребителят трябва да плъзне елемент от началната му позиция, преди той действително да се премести. Стойността по подразбиране е 1 пиксел
решетка	Принуждава прихващането на преместения елемент към клетките на мрежата. Стойността по подразбиране е false, което означава, че няма обвързване

Ограничаване на посоките на движение

Има няколко начина, по които можете да ограничите движението на даден елемент в определени посоки. Първият е да използвате опцията за оста, която ви позволява да ограничите посоката на движение до оста X или Y. Пример за това е показан по-долу:

... div.dragElement (размер на шрифта: голям; рамка: тънко плътно черно; подложка: 16px; ширина: 8em; подравняване на текст: център; цвят на фона: светлосив; поле: 4px ) $(function() ( $ (".dragElement").draggable(( axis: "x")).filter("#dragV").draggable("option", "axis", "y"); )); Плъзнете вертикално Плъзнете хоризонтално Пример за изпълнение

В този пример дефинираме два елемента div, избираме ги с помощта на jQuery и извикваме метода draggable(). Като аргумент на този метод ние предаваме обект, който първоначално ограничава движението на двата елемента div до посоката по оста X. След това използвайки метода jQuery filter(), можем да изберем елемента dragV, без jQuery да търси отново целия документ и го задаваме в друга позволена посока на движение - по оста Y. Така получаваме документ, в който единият div елемент може да се влачи само във вертикална посока, а другият - само в хоризонтална посока. Резултатът е показан на фигурата:

Ограничаване на допустимата зона на движение на елемента

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

Пример за използване на опцията за ограничаване е даден по-долу:

... div.dragElement (размер на шрифта: голям; рамка: тънко плътно черно; подложка: 16px; ширина: 8em; подравняване на текст: център; цвят на фона: светлосив; поле: 4px ) #container ( граница: средно двойно черно; ширина: 700px; височина: 450px) $(function() ( $(".dragElement").draggable(( containment: "parent" )).filter("#dragH").draggable("option", " ос", "x"); )); Плъзнете хоризонтално Плъзнете вътре в родител Изпълни пример

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

Ограничаване на възможността за преместване на елемент до клетки на мрежата

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

... #draggable (размер на шрифта: x-голям; рамка: тънко плътно черно; ширина: 5em; подравняване на текст: център; padding:10px) $(function() ( $("#draggable").draggable( ( решетка: )); )); Drag me Run пример

Този пример определя решетка с клетки с ширина 100 пиксела и височина 50 пиксела. Когато плъзнете елемент, той "скача" от една (невидима) клетка в друга. Ефектът на прихващане е чудесен пример за това как може да се използва функционалността за взаимодействие, но е трудно да се предаде с екранни снимки.

Можете да създадете ефект на прилепване само за една посока, като зададете оста на свободно движение на 1. Например, ако зададете опцията за решетка на , елементът ще се прикрепи към клетки с мрежа с ширина 100 пиксела, когато се движи хоризонтално, но ще се движи свободно вертикално.

Забавяне на движението

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

Пример за използване на двете настройки е даден по-долу:

... #време, #разстояние (размер на шрифта: голям; рамка: тънко плътно черно; подложка: 10px; ширина: 120px; подравняване на текст: център; цвят на фона: светлосив; поле: 4px; ) $(функция( ) ( $("#time").draggable(( забавяне: 1000 )) $("#distance").draggable(( разстояние: 150 )) )); Блокиране със закъснение Блокиране с минимално разстояние Пример за бягане

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

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

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

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

Използване на методи за взаимодействие с плъзгане

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

Използване на плъзгащи се събития за взаимодействие

Interaction Draggable поддържа прост набор от събития, които ви уведомяват при плъзгане на елемент. Тези събития са описани в таблицата по-долу:

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

... #draggable (размер на шрифта: x-голям; рамка: тънко плътно черно; ширина: 190px; подравняване на текст: център; padding:10px) $(function() ( $("#draggable").draggable( ( start: function() ( $("#draggable").text("Drag me..."), stop: function() ( $("#draggable").text("Drag me") ) )) ;)); Drag me Run пример

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

Използване на Droppable Interaction

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

Елементите, към които е приложено взаимодействието Droppable (получаващи елементи), получават способността да приемат подвижни елементи, създадени с помощта на взаимодействието Draggable.

Получаващите елементи се създават с помощта на метода droppable(), но за да получите полезна функционалност, ще трябва да създадете манипулатори на събития сред дефинираните за този тип взаимодействие. Наличните събития са показани в таблицата по-долу:

Събития за взаимодействие с възможност за премахване Описание на събитието

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

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

... #draggable, #droppable (размер на шрифта: голям; граница: тънко плътно черно; подложка: 10px; ширина: 100px; подравняване на текст: център; цвят на фона: светлосив; марж: 4px;) #droppable (подложка : 20px; позиция: абсолютна; дясно: 5px;) $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $(" #draggable").text("Left") ) )); )); Оставете ме тук Drag me Run пример

Този пример добавя елемент div към документа, чието текстово съдържание е представено от низа „Оставете тук“. Избираме този елемент с помощта на jQuery и извикваме метода droppable(), като му предаваме обект с настройки, който дефинира манипулатор за събитието drop. Отговорът на това събитие е да се промени текстът на премествания елемент с помощта на метода text().

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

Всичко изглежда много просто. Плъзгаме елемента, който се мести, докато е над приемащия елемент и го пускаме. Елементът, който е изпуснат, остава там, където е бил оставен, и неговото текстово съдържание се променя в отговор на събитието за изпускане. Следващите раздели показват как да използвате други събития за взаимодействие с Droppable за подобряване на потребителското изживяване.

Осветяване на целевия обект

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

... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Наляво ") ), активирайте: function() ( $("#droppable").css(( border: "среден двойно зелен", backgroundColor: "lightGreen" )); ), деактивирайте: function() ( $("#droppable ").css("border", "").css("background-color", ""); ) )); )); ...Изпълни пример

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

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

Боравене с припокриващи се елементи

Технологията за плъзгане и пускане може да бъде подобрена чрез добавяне на обработка на събития. Събитието над възниква, когато 50% от премествания елемент е над която и да е част от приемащия елемент. Изходното събитие възниква, когато предишните припокриващи се елементи вече не се припокриват. Пример за отговор на тези събития е даден по-долу:

$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Left") ) , активирайте: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), деактивирайте: function() ( $("#droppable"). css("border", "").css("background-color", ""); ), over: function() ( $("#droppable").css(( border: "medium double red", backgroundColor : "red" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ) ); Пример за изпълнение

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

Тази граница от 50% се нарича праг на припокриване (толеранс), чиято стойност може да бъде зададена при създаване на приемащия елемент, както ще бъде показано по-късно.

Настройване на Droppable взаимодействия

Взаимодействието Droppable има редица свойства, които можете да промените, за да персонализирате поведението му. Тези свойства са изброени в таблицата по-долу:

Свойства за взаимодействие с възможност за пускане Описание на имота

хора с увреждания	Ако тази опция е вярна, тогава функцията за взаимодействие Droppable първоначално е деактивирана. Стойността по подразбиране е false
приемам	Стеснява набора от подвижни елементи, на които приемащият елемент ще реагира. Стойността по подразбиране е *, която съответства на всеки елемент
активен клас	Дефинира клас, който ще бъде присвоен в отговор на събитието за активиране и премахнат в отговор на събитието за деактивиране
hoverClass	Дефинира клас, който ще бъде присвоен в отговор на събитие над и премахнат в отговор на събитие извън
толерантност	Определя минималната степен на припокриване, при която възниква събитие на свръх

Ограничаване на разрешените елементи за преместване

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

... .draggable, #droppable (размер на шрифта: голям; граница: тънко плътно черно; подложка: 10px; ширина: 100px; подравняване на текст: център; цвят на фона: светлосив; марж: 4px;) #droppable (подложка : 20px; позиция: абсолютна; дясно: 5px;) $(function() ( $(".draggable").draggable(); $("#droppable").droppable(( drop: function(event, ui) ( ui.draggable.text("Left") ), активиране: function() ( $("#droppable").css(( border: "среден двойно зелен", backgroundColor: "lightGreen" )); ), деактивиране: функция () ($("#droppable").css("border", "").css("background-color", ""); ), приемете: "#drag1" )); )); Оставете тук Елемент 1 Елемент 2 Пример за изпълнение

В този пример има два плъзгащи се елемента с идентификатори drag1 и drag2. Когато създаваме приемащ елемент, използваме опцията accept, с която указваме, че само drag1 елементът ще бъде приемлив елемент за преместване.

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

Забележете промяната в начина, по който избираме приемлив плаващ елемент, на който да извикаме метода text(). Когато в документа имаше само един движещ се елемент, атрибутът id беше достатъчен за това:

Drop: function() ( $("#draggable").text("Left") ),

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

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

Пускане: функция(събитие, потребителски интерфейс) ( ui.draggable.text("Наляво")),

Промяна на прага на припокриване

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

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

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

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

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

... $(функция() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ...Изпълни пример

Когато потребителят започне да плъзга елемент, jQuery UI извиква функцията, посочена от помощния параметър, и използва върнатия елемент като обект за плъзгане. В този случай използвам jQuery, за да създам img елемента. Резултатът е показан на фигурата:

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

Ui обектът, който jQuery UI предава на Droppable взаимодействие събития, съдържа помощно свойство и това свойство може да се използва за манипулиране на помощника, докато се плъзга. По-долу е даден пример за използване на това свойство във връзка със събитията over и out:

... $(функция() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , out: function(event, ui) ( ui.helper.css("border", "") ) )); )); ...

Тук събитията over и out и свойството ui.helper се използват за показване на граница около помощния елемент, когато той се припокрива с приемащия елемент. Резултатът е показан на фигурата:

Прилепване към ръбовете на елемента

Използвайки опцията за прихващане, можете да гарантирате, че преместеният елемент е „привлечен“ към краищата на елементите, до които минава. Тази опция приема селектор като стойност. Елементът, който се премества, ще щракне към краищата на всеки елемент, съответстващ на посочения селектор. Пример за използване на опцията за прилепване е даден по-долу:

Изпълнете пример за потребителски интерфейс на jQuery #snapper, .draggable, .droppable (размер на шрифта: голям; рамка: средно плътно черно; подложка: 4px; ширина: 150px; подравняване на текст: център; цвят на фона: светлосив; margin-bottom: 10px ;).droppable (маржин-дясно: 5px; височина: 50px; ширина: 120px) #dropContainer (позиция: абсолютна; дясно: 5px;) div span (позиция: относителна; горе: 25%) .droppable.active (граница: средно плътно зелено) .droppable.hover (цвят на фона: светлозелено) #snapper (позиция: абсолютна; ляво: 35%; рамка: средно плътно черно; ширина: 180px; височина: 50px) $(функция() ( $(" div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "и двете", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "active", hoverClass: "зависи" )); )); Cart Snap here Плъзнете ме

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

Има няколко помощни опции, които ви позволяват да персонализирате по-прецизно поведението на закотвяне на елементите. Една от тях е опцията snapMode. С негова помощ можете да посочите вида на обвързването. Допустими са следните стойности: атрешна(прилепване към вътрешните ръбове на елементите), външен(прилепване към външните ръбове на елементите) и и двете(прилепване към всички ръбове; по подразбиране).

Опцията snapTolerance ви позволява да укажете колко далеч плаващият елемент трябва да се доближи до ръба на целевия елемент, преди да се случи прихващане. Стойността по подразбиране е 20, което означава 20 пиксела. Примерът използва стойност от 50, която съответства на щракване на по-голямо разстояние. Много е важно да изберете правилната стойност за тази опция. Ако стойността на snapTolerance е твърде ниска, потребителят може да не забележи ефекта на прихващане, а ако е твърде висока, елементът, който се премества, ще започне да прави неочаквани скокове, прихващайки се към отдалечени елементи.

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

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

Подготовка на съдържание

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

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

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

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

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

Инсталиране на CSS

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

Два 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 и CSS са отлични езици за описване на тагове и стилизирането им, но когато разработчикът има способността да манипулира интерактивно елементите на страницата без ръчно преизчисляване на координати и размери, това прави работата по-удобна и ефективна.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

onDragDrop (тип TDragDropEvent) - генерира се от обекта-получател, когато влаченият обект се пусне върху него. На манипулатора на събитието се подават текущите координати на показалеца на мишката, обекта на получателя Sender (тип TObject) и оригиналния обект на движение Източник (тип 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; край;

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

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