Општи прашања и теорија на технологијата Drag and Drop. Технологија за влечење и спуштање во Android Погледнете што е „Повлечете и спуштете“ во другите речници

182

Во овој пример, избираме div елемент и го правиме подвижен со повикување на методот draggable() на него. Како што е прикажано на сликата подолу, во отворениот документ елементот ја зазема својата вообичаена позиција, но после тоа може да се премести со помош на покажувачот на глувчето на кое било место во прозорецот на прелистувачот:

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

Интеракцијата што може да се влече се постигнува исклучиво преку употреба на специфични HTML ознаки и CSS стилови. Ова значи дека оваа функционалност ќе работи во речиси секој прелистувач, но елементите опремени со неа нема да можат да работат со слични домашни алатки за влечење и спуштање оперативни системи.

Операциите за влечење и спуштање дефинирани со спецификацијата HTML5 обично се имплементираат со користење на механизми на мајчин оперативен систем. Ако го користите механизмот за влечење и спуштање на jQuery UI, тогаш подобро е да ги оневозможите еквивалентните функции на HTML5 за да избегнете конфликти. За да го направите ова, поставете го атрибутот за влечење на елементот тело на документот на неточно.

Поставување на интеракцијата за влечење

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

Карактеристики на интеракција што може да се влечат Опис на имотот

оска	Ја ограничува можноста за движење во одредени насоки. Стандардната вредност е неточна, што значи дека нема ограничување, но можете исто така да наведете вредност од „x“ (се движите само по оската X) или „y“ (движете се само по оската Y)
задржување	Ја ограничува локацијата на елементот што се преместува во одредена област на екранот. Видовите на поддржани вредности се опишани во табелата подолу, користејќи го соодветниот пример. Стандардната вредност е неточна, што значи дека нема ограничувања
одложување	Одредува колку долго елементот мора да се влече пред да се движи. Стандардната вредност е 0, што значи дека нема одложување
растојание	Го дефинира растојанието што корисникот мора да го повлече елементот од неговата почетна позиција пред тој навистина да се помести. Стандардната вредност е 1 пиксел
мрежа	Го принудува прилепувањето на поместениот елемент во ќелиите на мрежата. Стандардната вредност е неточна, што значи дека нема обврзувачки

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

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

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

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

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

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

Пример за користење на опцијата за задржување е даден подолу:

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

Во овој пример, и двата елементи се ограничени во нивната способност да се движат, така што тие можат да се влечат само во нивниот родителски елемент, кој е див со фиксна големина. Еден од div-ите што се плови има дополнително ограничување да се плови со користење на опцијата оска со тоа што може да се движи само хоризонтално во рамките на својот родител. Резултатот е илустриран на сликата:

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

Опцијата grid ви овозможува да го поставите врзувањето на поместениот елемент за ќелиите на мрежата. Оваа опција зема како вредност низа од два елементи кои ја специфицираат ширината и висината на мрежните ќелии во пиксели. Пример за користење на опцијата grid е даден подолу:

... #повлекување (големина на фонтот: x-large; раб: тенка цврста црна; ширина: 5em; порамнување на текст: центар; полнење: 10 px) $(function() ( $("#draggable").draggable( ( мрежа: )); )); Повлечете ме Run пример

Овој пример одредува мрежа со ќелии широки 100 пиксели и високи 50 пиксели. Кога влечете елемент, тој „скока“ од една (невидлива) ќелија во друга. Ефектот на кршење е одличен пример за тоа како може да се користи функционалноста на интеракцијата, но тешко е да се пренесе со помош на слики од екранот.

Може да креирате ефект на запирање само за една насока со поставување на оската на слободно движење на 1. На пример, ако ја поставите опцијата за решетката на , елементот ќе се прикачи на мрежните ќелии со ширина од 100 пиксели кога ќе се помести хоризонтално, но ќе се движи слободно вертикално.

Доцнење на движење

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

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

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

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

Во случај на доцнење, одредено со опцијата за одложување, корисникот мора да влече одредено време пред да го премести елементот. Во овој пример, времетраењето на овој период е 1000 ms. Во овој момент не е неопходно да се движи глувчето, но во текот на целиот период на одложување копчето на глувчето мора да остане притиснато, по што елементот може да се помести со движење на глувчето. По истекот на времето на одложување, елементот што се преместува ќе се прикачи на локацијата на покажувачот на глувчето, предмет на ограничувањата наметнати од опциите за решетката, регионот и оската дискутирани претходно.

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

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

Користење на методи на интеракција што може да се влечат

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

Користење на настани за интеракција што може да се влечат

Interaction Draggable поддржува едноставен сет на настани кои ве известуваат кога некој елемент е влечен. Овие настани се опишани во табелата подолу:

Како и кај настаните со виџети, така и на овие настани може да се одговори. Пример за справување со настаните за почеток и стоп е даден подолу:

... #повлекување (големина на фонтот: x-large; граница: тенка цврста црна; ширина: 190 px; порамнување на текст: центар; полнење: 10 px) $(function() ( $("#draggable").draggable( ( start: function() ( $("#draggable").text("Повлечете ме..."), stop: function() ($("#draggable").text("Повлечете ме") ))) ;)); Повлечете ме Run пример

Овој пример ги користи настаните за почеток и стоп за да ја промени текстуалната содржина на елементот додека се влече. Оваа предност се должи на фактот што интеракцијата на Draggable е целосно имплементирана со користење на HTML и CSS: можете да го користите jQuery за да ја промените состојбата на елементот што може да се влече дури и кога се движи низ екранот.

Користење на Droppable Interaction

Самото влечење на елемент може да биде доволно во некои ситуации, но најкорисно е кога се користи заедно со интеракцијата Droppable.

Елементите на кои е применета интеракцијата Droppable (елементи кои примаат) добиваат способност да прифаќаат подвижни елементи создадени со помош на интеракцијата Draggable.

Елементите што примаат се креираат со помош на методот droppable(), но за да добиете корисна функционалност ќе треба да креирате управувачи со настани од оние што се дефинирани за овој тип на интеракција. Достапните настани се прикажани во табелата подолу:

Настани за интеракција што може да се испуштаат Опис на настанот

создаваат	Се појавува кога интеракција Droppable се применува на елемент
активирај	Се појавува кога корисникот почнува да го влече елементот што се преместува
деактивирајте	Се појавува кога корисникот ќе престане да го влече елементот што се преместува
над	Се случува кога корисникот влече пловечки елемент над елементот што прима (под услов копчето на глувчето сè уште не е пуштено)
надвор	Се случува кога корисникот го влече елементот што се преместува надвор од елементот што прима
капка	Се појавува кога корисникот го остава елементот што се преместува на елементот што прима

Подолу е даден пример за создавање едноставен елемент за примање за кој е дефиниран управувач со настани со еден капка:

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

Овој пример додава div елемент во документот чија текстуална содржина е претставена со низата „Остави овде“. Го избираме овој елемент користејќи jQuery и го повикуваме методот droppable(), пренесувајќи му објект за поставки кој дефинира управувач за настанот за паѓање. Одговорот на овој настан е да се промени текстот на елементот што се преместува користејќи го методот text().

Интеракцијата Drag-and-drop создадена во овој пример е едноставна, но обезбедува корисен контекст за објаснување како интеракциите за Draggable и Droppable работат заедно. Различните фази на процесот на влечење елементи се илустрирани на сликата:

Сето тоа изгледа многу едноставно. Го влечеме елементот што се преместува додека не се најде над елементот што прима и го ослободуваме. Елементот што е исфрлен останува таму каде што е оставен, а неговата содржина на текст се менува како одговор на настанот за паѓање. Следните делови покажуваат како да користите други настани за интеракција на Droppable за да го подобрите корисничкото искуство.

Осветлување на објектот што прима цел

Користејќи ги настаните за активирање и деактивирање, можете да го означите објектот што прима цел кога корисникот ќе го започне процесот на влечење елемент. Во многу ситуации, оваа идеја е многу плодна бидејќи на корисникот му дава сигурни насоки за тоа кои елементи се дел од моделот со влечење и спуштање. Соодветниот пример е даден подолу:

... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text ("Лево ") ), активирај: функција() ( $("#droppable").css ((рабница: "средно двојно зелена", позадинаБоја: "светлоЗелена" )); ), деактивирај: функција() ( $("#droppable ").css ("граница", "").css ("боја на позадина", ""); ) )); )); ... Стартувај пример

Штом корисникот ќе почне да влече елемент, се активира настанот за активирање поврзан со нашиот елемент што прима, а функцијата управувач го користи методот css() за да ги смени својствата CSS на границата и бојата на позадината на тој елемент. Како резултат на тоа, елементот што прима цел е означен, што му покажува на корисникот дека постои врска помеѓу него и елементот што се преместува.

Настанот за деактивирање се користи за отстранување на вредностите на својствата на CSS од елементот примач и враќање во него почетната состојба, штом корисникот го пушти копчето на глувчето. (Овој настан се случува секогаш кога ќе престане влечењето на елементот, без разлика дали елементот што се влече е оставен на елементот што прима или не.) Овој процес е илустриран на сликата:

Ракување со елементи со преклопување

Технологијата за влечење и спуштање може да се подобри со додавање одново и одново справување со настани. Настанот над се случува кога 50% од елементот што се преместува е над кој било дел од елементот што прима. Настанот надвор се случува кога претходно преклопувачките елементи повеќе не се преклопуваат. Пример за одговорот на овие настани е даден подолу:

$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ($("#draggable").text("Лево") ) , активирај: функција() ( $("#droppable").css((рабница: "средно двојно зелена", позадинаБоја: "светлоЗелена" )); ), деактивирај: функција() ($("#droppable"). css ("граница", "").css ("боја на позадина", ""); ), над: функција () ( $("#droppable").css (( граница: "средно двојно црвено", позадинаБоја : "црвено" )); ), надвор: функција() ($("#droppable").css("граница", "").css("боја на позадина", ""); ) )); ); Стартувај пример

Овде се користат истите функции на управувачот како и во претходниот пример, но во овој случај тие се поврзани со над и надвор настани. Кога приемниот елемент се преклопува најмалку 50% од елементот што се преместува, тој е затворен во рамка и неговата боја на позадината се менува, како што е прикажано на сликата:

Оваа граница од 50% се нарекува праг на преклопување (толеранција), чија вредност може да се постави при креирањето на елементот за примање, како што ќе биде прикажано подоцна.

Поставување на Droppable интеракција

Интеракцијата Droppable има голем број својства што можете да ги промените за да го приспособите неговото однесување. Овие својства се наведени во табелата подолу:

Својства на интеракција со Droppable Опис на имотот

оневозможено	Ако оваа опција е вистинита, тогаш функцијата за интеракција на Droppable првично е оневозможена. Стандардната вредност е неточна
прифати	Го стеснува множеството подвижни елементи на кои ќе реагира приемниот елемент. Стандардната вредност е *, која одговара на кој било елемент
activeClass	Дефинира класа што ќе биде доделена како одговор на настанот за активирање и отстранета како одговор на настанот за деактивирање
hoverClass	Дефинира класа што ќе биде доделена како одговор на над настан и отстранета како одговор на надворешен настан
толеранција	Го дефинира минималниот степен на преклопување при кој се случува над настанот

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

Можете да го ограничите множеството на елементи што може да се испуштаат што ќе бидат прифатени од елемент со функционалност за интероперабилност на Droppable со користење на опцијата прифати. Вредноста на опцијата за прифаќање треба да се постави на избирач. Како резултат на тоа, настаните за интеракција на Droppable ќе се појават само ако елементот што се преместува се совпаѓа со наведениот избирач. Соодветниот пример е даден подолу:

... .повлекување, #droppable (големина на фонтот: голем; раб: тенко солидна црна; полнење: 10 px; ширина: 100 px; порамнување на текст: центар; боја на позадина: светлосива; маргина: 4 px;) #droppable (пополнување : 20 px; позиција: апсолутна; десно: 5 px;) $(function() ( $(".draggable").draggable(); $("#droppable"). ui.draggable.text("Лево") ), активирај: функција() ( $("#droppable").css(( граница: "средно двојно зелена", позадинаБоја: "светлоЗелена" )); ), деактивирај: функција () ( $("#droppable").css("граница", "").css("боја на позадина", ""); ), прифати: "#drag1" )); )); Остави овде Елемент 1 Елемент 2 Изврши пример

Во овој пример има два елементи што може да се влечат со ID-и drag1 и drag2. При креирање на елемент за примање, ја користиме опцијата прифати, со која укажуваме дека само елементот drag1 ќе биде прифатлив елемент за преместување.

Кога ќе го повлечете елементот drag1, ќе го видите истиот ефект како во претходните примери. Во соодветни моменти, настаните за активирање, деактивирање, над и исклучување ќе се активираат за елементот што прима. Во исто време, ако повлечете елемент drag2 што не се совпаѓа со избирачот наведен во параметарот за прифаќање, тогаш овие настани нема да се активираат. Овој елемент може слободно да се движи, но нема да биде воочен од елементот што прима.

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

Спушти: функција() ( $("#влечи").текст("Лево") ),

Во овој пример, постојат два пловечки елементи, а изборот по атрибут id нема да го произведе посакуваниот резултат, бидејќи текстот во овој случај секогаш ќе се менува во истиот пловечки елемент, без разлика кој е прифатлив за елементот што прима.

Решението е да се користи објектот UI, кој jQuery UI го обезбедува како дополнителен аргумент за секој управувач со настани. Својството за влечење на објектот UI враќа jQuery објект кој го содржи елементот што корисникот го влече или се обидува да го фрли на целниот елемент, овозможувајќи саканиот елемент да се избере вака:

Спуштање: функција (настан, интерфејс) ( ui.draggable.text(„Лево“) ),

Промена на прагот на преклопување

Стандардно, над настанот се случува само кога најмалку 50% од елементот што се преместува се преклопува со елементот што прима. Износот на ова преклопување на прагот може да се промени со користење на опцијата за толеранција, која може да ги земе вредностите прикажани во табелата подолу:

Двете вредности што најчесто ги користам се фит и допир затоа што имаат најголема смисла за корисниците. Го користам вклопувањето кога влечениот елемент треба да остане во областа на елементот примач во кој е преместен и допирам кога влечениот елемент треба да се врати во првобитната положба (пример ќе биде даден подолу). Пример за користење на параметрите за вклопување и допир е даден подолу:

Вредноста на клонот му кажува на jQuery UI да создаде копија од елементот што се преместува, заедно со целата негова содржина, и да го користи добиениот резултат како помошен елемент. Резултатот е прикажан на сликата:

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

Како што е прикажано на сликата, оригиналниот елемент што се преместува останува на своето место и само помошниот елемент се движи околу екранот следејќи го покажувачот на глувчето. Ако големината на поместениот елемент е голема, како во нашиот пример, тогаш ги опфаќа останатите елементи на документот, така што на корисникот ќе му биде тешко дури и да ја следи позицијата на елементот што прима. Овој проблем може да се реши со обезбедување на функцијата како вредност на опцијата за помошник, како што е прикажано во примерот подолу:

... $(function() ( $("div.draggable")..png"/>") )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ... Стартувај пример

Кога корисникот ќе почне да влече елемент, jQuery UI ја повикува функцијата наведена со помошниот параметар и го користи вратениот елемент како објект што треба да се влече. Во овој случај, јас користам jQuery за да го креирам елементот img. Резултатот е прикажан на сликата:

Мала слика делува како прокси за елементот што се преместува, што го олеснува следењето на другите елементи во документот.

Објектот UI што jQuery UI го пренесува на настаните за интеракција на Droppable содржи својство на помошник и ова својство може да се користи за манипулирање со помошникот додека се влече. Подолу е даден пример за користење на ова својство во врска со настаните над и надвор:

... $(function() ( $("div.draggable")..png"/>") )); $("#basket").droppable(( activeClass: "active", hoverClass: "lover", over: function(event, UI) ( ui.helper.css("border", "thick solid #27e6ed") ) , надвор: функција (настан, интерфејс) ( ui.helper.css ("граница", "") ) )); )); ...

Овде настаните над и надвор и својството ui.helper се користат за прикажување на граница околу помошниот елемент кога се преклопува со елементот што прима. Резултатот е прикажан на сликата:

Прикачете се на рабовите на елементот

Користејќи ја опцијата Snap, можете да се осигурате дека поместениот елемент е „привлечен“ до рабовите на елементите до кои поминува. Оваа опција прифаќа избирач како вредност. Елементот што се преместува ќе се прилепува на рабовите на кој било елемент што одговара на наведениот избирач. Пример за користење на опцијата Snap е даден подолу:

Стартувај jQuery UI пример #snapper, .draggable, .droppable (големина на фонтот: голем; раб: средно солидна црна; полнење: 4 px; ширина: 150 px; порамнување текст: центар; боја на позадина: светлосива; маргина-долу: 10 px ;). средно цврсто зелено) .droppable.Hover (боја на заднина: светлозелена) #snapper (позиција: апсолутна; лево: 35%; граница: средно солидна црна; ширина: 180 px; висина: 50 px) $(function() ($(" div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "dy", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "active", hoverClass: „лебди“));)); Количка Закопчајте овде Повлечете ме

Кога движечкиот елемент се приближува до еден од соодветните елементи, тој, како да е, „привлечен“ кон него на таков начин што нивните соседни рабови се допираат. За такво врзување, можете да изберете кој било елемент, не само оној што прима. Во овој пример, додадов елемент div и ја поставив опцијата snap на вредност што го избира тој елемент, како и елементот што прима во документот.

Постојат неколку опции за помош кои ви овозможуваат попрецизно да го приспособите однесувањето на елементите за прицврстување. Една од нив е опцијата snapMode. Со негова помош можете да го одредите типот на врзување. Дозволени се следните вредности: внатрешен(прикачи на внатрешните рабови на елементите), надворешен(прицврстете се на надворешните рабови на елементите) и и двете(залепете на сите рабови; стандардно).

Опцијата snapTolerance ви овозможува да одредите до каде лебдечкиот елемент мора да се приближи до работ на целниот елемент пред да се случи кинење. Стандардната вредност е 20, што значи 20 пиксели. Примерот користи вредност од 50, што одговара на прилепување на поголемо растојание. Многу е важно да се избере точната вредност за оваа опција. Ако вредноста на snapTolerance е премногу ниска, корисникот може да не го забележи ефектот на кршење, а ако е превисок, елементот што се преместува ќе почне да прави неочекувани скокови, прилепувајќи се на далечни елементи.

Употреба на технологија повлечи и пушти(drag and drop) му овозможува на корисникот да преместува различни објекти од еден на друг, на пример, елементи од една листа во друга. За да го направите ова, треба да користите две контроли: мијалник и извор. Приемникот е објектот што ќе го прими изворниот објект (објектот што се преместува).

Настаните што се случуваат за време на движењето на предметите се наведени подолу по редоследот по кој се случуваат.

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

OnDragOver(тип TDragOverEvent) - создава објект на приемник кога влечениот објект е над него. Параметри кои се пренесуваат на управувачот со настани: објект на примачот Испраќач (тип TObject), изворен објект Извор (тип TObject), состојба на движење (тип TDragState), X и Y (тип цел број) - тековни координати на покажувачот на глувчето, Прифати ( тип boolean ) знак за потврда на операцијата преместување. Состојбата на движење јасно покажува дали предметот што се преместува е во областа на приемникот, се движи во него или го напуштил. Положените параметри му овозможуваат на одредишниот објект да го прифати или одбие изворниот објект. Параметарот Accept е поставен на Trye ако операцијата преместување е прифатена, во спротивно е поставена на Неточно.

onDragDrop (тип TDragDropEvent) - генериран од објектот на примачот кога влечениот објект е испуштен на него. На управувачот со настани се пренесуваат тековните координати на покажувачот на глувчето, објектот на примачот Испраќач (тип TObject) и оригиналниот објект за движење Извор (тип TObject).

onEndDrag (тип на EndDragEvent) - се зголемува кога операцијата за влечење ќе заврши. Координатите X и Y на точката каде што изворниот објект Испраќач и објектот Цел примач се пренесуваат до управувачот со настани.

За да креирате drag and drop, доволно е да се имплементираат два настани: OnDragDrop и OnDragOver со својството DragMode поставено на dmAutomatic. Во спротивно, почетокот на операцијата за влечење, методот BeginDrag, мора да биде кодиран од програмерот.

За да го консолидираме материјалот, ќе ја создадеме следнава апликација. Ставете ја компонентата Панел на формуларот. Поставете го својството DragMode на Object Inspector на dmAutomatic. Ајде да го избереме објектот на формата и да го користиме Object Inspector за да ги креираме следните настани:

Постапка TForm1.FormDragOver(Испраќач, Извор: TObject; X, Y: Цел број; Состојба: TDragState; var Прифати: Булова); започне ако Извор = Панел1 тогаш Прифати:= Точно друго Прифати:= Неточно; крај; процедура TForm1.FormDragDrop(Испраќач, Извор: TObject; X, Y: Цел број); започне Panel1.Left:= X; Panel1.Top:= Y; крај;

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

Крајна линија: се запознавме со технологијата повлечи и пушти(drag and drop) и го искористи во пракса.

Техниките за влечење и пуштање еволуираа во текот на многу години. Не е изненадување што со зголемениот број на програмери кои развиваат додатоци со отворен код (како што е jQuery), старите методи се оживуваат. Библиотеката JavaScript е многу одговорна и нуди многу подобрувања во оваа ера на веб технологија.

Во ова упатство ќе направиме скрипта што можете да ја користите за да креирате динамични правоаголници за влечење и пуштање на вашата веб-страница. Процесот е управуван од jQuery. Ваквите скрипти заштедуваат време со обезбедување на готова функционалност! И библиотеката со влечење и пушти може да се користи во други проекти.

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

Прво, да подготвиме мала веб-страница за проектот. Во папката на проектот треба да креирате два директориуми со значајните имиња „js“ и „css“ и празна датотека индекс.html. Кодот ќе биде многу едноставен, за да има јасна идеја за работата и да има точка за понатамошен развој.

Подолу е кодот за нашата HTML-датотека. Во поглавјето главатавклучуваме 3 скрипти. Главната скрипта за jQuery ќе се вчита од серверот Google Code. вклучена е и нашата стилска датотека style.css, која ги содржи главните својства за формирање изгледнашиот документ.

Повлечете ме Да, да. Токму јас. Можете да ме повлечете и мене ( zIndex: 200, непроѕирност: .9 )

P.S.: можете да ме оставите каде било!

Внатрешен дел телопоставени се само два блока див, кои ги содржат двата правоаголници. Кодот е прилично едноставен и разбирлив. Внатре во секој правоаголник има заглавија со управувачот на класи и управувачот2. Ова е важно бидејќи секој правоаголник се однесува различно додека го влечете.

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

HTML кодот е многу едноставен. Ако го разбирате основното обележување, тогаш стиловите на CSS нема да бидат ни тешки. Главно дефинирани маргини, облоги и бои.

Тело, html ( фонт-семејство:Calibri, sans-serif; позадина:#eaf3fb; големина на фонт:12px; висина:1000px; висина-линија:18px;) p (висина:30px; )

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

Dv1 ( ширина: 200 px; боја на заднина: #eff7ff; граница: 1px солидна #96c2f1; позиција: апсолутна; лево: 100 px; врвот: 100 px; ) .dv1 h2 (боја на позадина:#b2d3f5; полнење: 5px; фонт- семејство:Georgia, "Times New Roman", Times, serif; големина на фонт: 1.0em; текст-трансформација: големи букви; фонт-тежина: задебелени букви; боја:#3a424a; маргина: 1px; курсор:поместување; ) .dv1 div ( полнење: 5 px; маргина-долу: 10 px; ) .dv2 (боја на позадина:#f6ebfb; граница: 1px солидна #a36fde; ширина: 550 px; позиција: апсолутна; курсор: поместување; лево: 400 px; горе: 230 px; ) .dv2 h2 (боја на позадина:#eacfe9; проред на букви: -0.09em; големина на фонт: 1.8em; тежина на фонт: задебелен; пополнување: 15 px; маргина: 1px; боја:#241f24; курсор:поместување; ) .dv2 .content2 ( пополнување: 5 px; маргина-долу: 10 px; )

За двете класи .dv1 и .dv2 користиме апсолутно позиционирање. Ова не е потребно и веројатно не е најмногу Најдобриот начинда ги поставите правоаголниците што може да се влечат. Меѓутоа, за нашиот пример, ова позиционирање има смисла, бидејќи секогаш кога страницата се освежува, правоаголниците се инсталираат на одредени места.

Исто така, фонтовите и боите се различни за правоаголниците за полесно да се види разликата.

Инаку, насловите и содржината на блоковите се речиси идентични. Ако сакате да копирате стилови во вашиот проект, променете ги имињата пред да започнете. Во некои случаи, има повеќе смисла да се користат ИД наместо класи, како на пример кога се користи техниката влечење и спушти за еден специфичен блок.

Парсирање на JavaScript

Две JavaScript-датотеки го содржат целиот код потребен за да функционира. Ќе ги изоставиме деталите за работа со jQuery, бидејќи ова е надвор од опсегот на лекцијата. Ајде да обрнеме внимание на датотеката jquery.dragdrop.js.

Линијата 22 ја дефинира функцијата Drags.

$.fn.Drags = функција(оптс) ( var ps = $.extend(( zИндекс: 20, непроѕирност: .7, управувач: null, onMove: функција() ( ), onDrop: функција() ( ) ), оптс );

Ова ја поставува променливата за враќање и податоците за иницијализација Повлекува. Овој метод многу често се користи кога се работи со jQuery за да се префрлат опциите на други функции. Внатрешно поставуваме променливи за сите достапни опции за правоаголниците што се влечат.

Следното парче код вклучува управувачи со настани за променливата dragdrop. Двата настани повлечетеИ капкаповик функции пренесувајќи им параметри на настанот. Овие настани се случуваат кога ќе го притиснете копчето на глувчето за да повлечете објект и потоа да го ослободите.

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

Нашите функции манипулираат со CSS позиционирањето на секој објект. Промената на апсолутното позиционирање на вашите објекти нема да влијае на тоа како функционира вашиот код, бидејќи секоја функција на JavaScript го менува стилот што е дефиниран за објектот.

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

Функции за влечење/спуштање

Втората датотека fn.js содржи многу едноставен код. Ние чекаме целосно оптоварувањедокумент, по што ги повикуваме нашите функции. Дефинирани се два примери на функцијата Повлекува, за што беше дискутирано претходно.

Имаме два подвижни блока со класи .dv1 и .dv2. Ако треба да оставите еден подвижен блок, тогаш само треба да го отстраните вториот дел од кодот. Додавањето на друг подвижен блок е исто така лесно. Само треба да додадете нова функција во оваа датотека.

Првиот чекор е да ги поставите опциите кога ја повикувате функцијата. Погрижете се да го поставите името на управувачот. Со него, му кажуваме на jQuery кој управувач да го користи кога ќе се притисне копчето на глувчето во одредена област на документот. Името на управувачот може да биде класа или ID атрибут.

Нашата прва функција има два управувачи со настани onMove и onDrop. И двете повикуваат нови функции кои се пренесуваат на тековниот настан како променливи. Ова е местото каде што HTML-кодот во правоаголникот се манипулира за да се ажурира со секое движење. Ова е одличен ефект за да покажете како можете да контролирате процес користејќи едноставни настани од jQuery.

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

Заклучок

Со малку труд, сега имаме на располагање одличен интерфејс за влечење и спуштање. jQuery обезбедува огромни придобивки за програмерите кои се желни да користат стари методи во нивните проекти.

Како резултат на тоа, ние не само што имаме функции за управувач со настани, туку можеме и да пренесуваме нови променливи на блокови што може да се влечат. Ова отвора нови можности за креативност. Демонстрацијата за лекцијата содржи само скица за тоа што може да се направи со користење на таков код.

Затоа, проверете ја документацијата за jQuery за да ги користите функциите на библиотеката.

За библиотеката VCL, Borland има имплементирано своја верзија на интерфејсот Drag&Drop (преведен како „drag and drop“). Овој интерфејс е внатрешен - можете да испраќате и примате какви било контроли на Delphi во формуларот (освен самиот формулар) Се спроведува без користење на соодветните функции на Windows API - тие мора да се користат при организирање комуникација со други задачи со влечење и пуштање.

Со кликнување на левото копче на глувчето над контролата, можеме да ја „влечеме“ на кој било друг елемент. Од гледна точка на програмер, тоа значи дека во моментите на влечење и отпуштање клуч се генерираат одредени настани кои ги пренесуваат сите потребни информации - покажувач кон влечениот објект, тековните координати на курсорот итн. од настаните е елементот на кој моментално се наоѓа курсорот. Управувачот со настани за таков настан мора да му каже на системот дали контролата го прима испраќањето или не. Кога ќе се ослободи копчето над приемната контрола, се генерираат уште еден или два настани, во зависност од подготвеноста на ресиверот.

CancelDrag Ја откажува тековната операција за влечење и спуштање или влечење и приклучување.

Функција FindDragTarget (const Pos: TPoint ; AllowDisabled: Boolean ): TControl ;

Функцијата враќа објект од основната класа TControl, што се однесува на позицијата на екранот со координатите дефинирани со параметарот Pos. Оваа функција се користи за одредување на потенцијалниот примач на операцијата влечење и спушти или влечење и приклучи. Ако не постои контрола на прозорецот за одредената позиција, тогаш функцијата враќа нула. Параметарот AllowDisabled одредува дали ќе се земат предвид оневозможените објекти.

Функција IsDragObject(Испраќач: TObject): Булова;

Функцијата одредува дали објектот наведен во параметарот Sender е потомок на класата TDragObject. Оваа функција може да се користи како параметар Извор во ракувачите со настани OnDragOver и OnDockOver за да се одреди дали влечениот објект ќе биде прифатен. Функцијата IsDragObject може да се користи и како параметар Source во ракувачите со настани OnDragDrop и OnDockDrop со цел правилно да се интерпретира влечениот објект.

Својства DragMode, DragCursor, методи BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, Accept параметар

Процесот на влечење информации од еден објект на друг со помош на глувчето е широко користен во Windows.Можете да преместувате датотеки помеѓу папки, да ги преместувате самите папки итн.

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

Почетокот на влечењето се одредува со својството DragMode, кое може да се постави во време на дизајнирање или програмски еднакво на dmManual или dmAutomatic. Вредноста dmAutomatic одредува дали процесот на влечење автоматски ќе започне кога корисникот ќе притисне копче на глувчето над компонентата. Меѓутоа, во овој случај, настанот OnMouseDown поврзан со кликнување на копчето на глувчето од страна на корисникот воопшто не се појавува за оваа компонента.

Интерфејсот за пренос и примање компоненти се појави многу одамна. Овозможува интеракција на две контроли додека апликацијата работи. Во овој случај, може да се извршат сите потребни операции. И покрај леснотијата на имплементација и долгогодишниот развој, многу програмери (особено почетници) сметаат дека овој механизам е нејасен и егзотичен. Сепак, користењето Drag-and-Drop може да биде многу корисно и лесно да се имплементира. Сега ќе се увериме во ова.

За да може механизмот да работи, треба соодветно да се конфигурираат две контроли. Едниот треба да биде извор (Извор), вториот треба да биде примач (Цел). Во овој случај, изворот не се движи никаде, туку е само регистриран како таков во механизмот.

Верувај ми, доволно е едноставно да ги конвертираш координатите X,Y пренесени во параметрите на настаните OnDragOver и OnDragDrop во координати на форми.

Работете со својствата Left и Top на компонентата по која се движи курсорот. Дозволете ми да ви дадам едноставен пример. Ставете компонента Memo на формуларот и поставете го својството Align на alTop. Поставете панел на формуларот, исто така поставете го својството Align на alTop и поставете го својството Height на мала вредност, да речеме 6 или 7 пиксели. Поставете го DragMode на dmAutomatica и DragCursor на crVSplit. Ставете друга компонента Memo и поставете Align на alClient. Истовремено изберете ги двете компоненти на Memo, панелот и креирајте заеднички управувач за настани OnDragOver како што е прикажано подолу:

Неодамна имав идеја да почнам да развивам игра за Android. За почеток, решив да пишувам шах. Ми се чинеше дека технологијата Drag and Drop ќе биде совршена за имплементирање на механизмот за движење на фигури. За неупатените, забележувам дека методот на влечење и пуштање е способност да се повлече еден графички објект на друг и да се изврши едно или друго дејство откако ќе се ослободи. Наједноставниот пример е бришење кратенка од работната површина на вашиот компјутер со влечење во корпата за отпадоци. Со „фрлање“ на етикетата во ѓубре, му кажуваме на системот дека сакаме да ги принудиме овие два објекти да комуницираат. Системот го прима нашиот сигнал и одлучува каква акција треба да преземе. Повлекувањето и пуштањето стана широко распространето поради неговата интуитивна јасност. Овој пристап е поддржан од нашето искуство во интеракција со објекти од реалниот свет и одлично функционира во виртуелна средина. Што се однесува до шахот, со помош на влечење и пуштање, технолошки е полесно да се одреди ќелијата каде што корисникот ја влечел фигурата, бидејќи нема потреба да се пресметува бројот на ќелијата од координатите на точката на ослободување. Оваа работа ќе ја преземе виртуелната машина.

Цели на користење на технологијата Drag n Drop

Користењето на технологијата за влечење и спуштање ми овозможува да решам три проблеми со мал напор:

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

Ја ограничив областа на движење на фигурата на големината на таблата.

Ако корисникот пушти парче на погрешно место, тоа треба да се врати во првобитната положба.

Задачите се наведени, ајде да започнеме да ги спроведуваме.

Замена на ImageView на допир

Сите мои облици се објекти ImageView. За жал, се покажа дека имплементацијата на Drag & Drop во Android не дозволува „директно надвор од кутијата“ да ја замени сликата на објектот кога ќе се допре. Сепак, оваа задача може целосно да се реши со помош на API. Ќе треба да извршиме неколку едноставни чекори:

Креирајте објект DragShadowBuilder.

Повикајте го методот startDrag.

Сокријте го нашиот ImageView, кој ја прикажува формата, со повикување на методот setVisibility со параметарот View.INVISIBLE. Како резултат на тоа, само објектот DragShadowBuilder ќе остане на екранот, што ќе му сигнализира на корисникот дека обликот е снимен.

Овие дејства мора да се имплементираат во управувачот OnTouchListner на објектот ImageView. За да го направите ова, ајде да го отфрлиме методот onTouch:

@ Отфрли јавен бул на допир (Преглед, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; View. DragShadowBuilder DragShadowBuilder dsb= new. (преглед) ; преглед. startDrag(clipData, dsb, view, 0 ) ; view. setVisibility(View. INVISIBLE) ; врати точно ;) друго (врати неточно;) )

Сè е многу едноставно. Значи, ја средивме замената на сликата, ајде да преминеме на следната задача.

Ограничување на областа за влечење за функцијата за влечење паѓање

Има проблем со ограничување на областа за влечење. Поентата е дека ако ослободите парче надвор од таблата, настанот за паѓање нема да се случи, бидејќи корисникот го пушти објектот на празен простор и нема ништо со кое објектот да комуницира. Како резултат на тоа, фигурата нема да се врати во првобитната состојба и ќе остане скриена засекогаш. Поминав многу време читајќи ја документацијата, но сè уште не можев да најдам начин да ја ограничам областа за влечење и спуштање на предметите. Увидот дојде ненадејно. Воопшто не треба да ја ограничувам областа, треба да знам дали корисникот правилно ја пушти формата или не.

Одредување на правилно ослободување
Најдов одговори на моите прашања во делот „ракување со влечење крајни настани“ на веб-локацијата на Android Developers. Еве неколку клучни точки:

Кога корисникот ќе заврши со влечење, настанот ACTION_DRAG_ENDED се генерира во управувачот DragListeners.

Во DragListener можете да добиете повеќе детални информацииза операцијата за влечење со повикување на методот DragEvent.getResult().

Ако DragListener врати точно како одговор на настанот ACTION_DROP, повикот до getResult исто така ќе се врати точно, во спротивно ќе се врати неточно.

Затоа, треба да го пресретнам настанот ACTION_DRAG_ENDED и да го повикам методот getResult. Ако се врати false, тогаш корисникот го одвлекол парчето од таблата и треба да го поставам ImageView на видлив режим.

@ Override public boolean onDrag(Преглед на преглед, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; Прикажи dragView= (Прикажи) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) (неточно) (false) содржи Dg) (false) ако (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( содржиDragable= точно ; ) друго ако (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility (View. if.)g)= = DragEvent. ACTION_DROP& amp;& amp; содржиDragable) ( checkForValidMove((ChessBoardSquareLayoutView) приказ, dragView) ; dragView. setVisibility(View. VISIBLE) ;) врати точно ; ) приватен бул dropled ) ;)

Сега корисникот може да ја ослободи фигурата каде било, и ништо лошо нема да се случи.

Дефиниција на валидни потези

Последниот дел од статијата е посветен на проверка на валидноста на потегот што корисникот се обидува да го направи. Пред детално да разговарам за оваа тема, ќе направам кратка белешка објаснувајќи ја структурата на мојата апликација. Шаховската табла е претставена како TableLayout, а секоја ќелија е дете на LinearLayout и има OnDragListener.

Дополнително, секој OnDragListener се однесува на објект „посредник“, кој се грижи за интеракцијата на објектите на играта и ја памети позицијата на тековната ќелија.

Кога корисникот влече парче преку ќелија, можни се следните дејства:

Користење на настанот ACTION_DRAG_ENTERED за поставување на променливата „containsDraggable“ на точно.

Користење на настанот ACTION_DRAG_EXITED за поставување на променливата „containsDraggable“ на неточно.

Користејќи го настанот ACTION_DROP за да го прашате медијаторот дали е прифатливо да се стави парче во оваа ќелија.

Подолу е кодот што ја имплементира опишаната логика

@ Override public boolean onDrag(Преглед на преглед, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; Прикажи dragView= (Прикажи) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) (неточно) (false) содржи Dg) (false) ако (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( содржиDragable= точно ; ) друго ако (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility (View. if.)g)= = DragEvent.ACTION_DROP& amp;& amp; содржиДрагирање) ( checkForValidMove((ChessBoardSquareLayoutView) поглед, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) врати точно ; )

Како што можете да видите, без разлика дали потегот е валиден или не, ImageView се пренесува во видлива состојба. Сакав корисникот да го види движењето на обликот. Претходно спомнав дека ќелијата е дете на LayoutView. Ова е направено за да се олесни преместувањето на ImageView од ќелија во ќелија. Подолу е кодот за методот checkForValidMove, кој покажува како се движи ImageView.

приватен void checkForValidMove(ChessBoardSquareLayoutView преглед, Прикажи dragView) ( if (посредник. isValidMove(view) ) ( ViewGroup сопственик= (ViewGroup) dragView. getParent() ; сопственик. removeView(dragView) ; view. addView (погледнете) (влечете. (Гравитација. ЦЕНТАР) ; поглед. showAsLanded() ; посредник. handleMove(view) ;) )

Се надевам дека оваа статија ќе ви помогне при развивање на сопствени проекти.