Vieglāk ir kaut ko paņemt un likt, nekā rakstīt, kas jāņem un kur jāliek. Protams, bez peles vai līdzīgas ierīces nevar neko atlasīt vai norādīt, taču pat pašreizējā situācijā vilkšanas un nomešanas idejas izmantošana ir ļoti dabiska un ērta.

Idejas tvērums ir ne tikai interneta veikali, digitālās bibliotēkas, meklēšana vai Informācijas sistēmas, bet arī pielietotā zona. Ideja ir ļoti pielietojama vietņu un to elementu izstrādē, veidota un uzturēta interaktīvi, bez programmētāja līdzdalības.

Idejas apraksts

Izvēlieties, pārvietojiet un ielieciet - ideja ir dabiska un ērta. Tas ir vienkārši pārsteidzoši, ka tas nav dzimis, kad pele kļuva par neaizstājamu datora piederumu.

Acīmredzamākais piemērs ir preces izvēle interneta veikalā. Izvēlieties vajadzīgo preci ar peli un ievelciet to iepirkumu grozā – vienkārši, dabiski un ērti. Faila augšupielāde: dokumenta izņemšana ārpus pārlūkprogrammas loga un ievietošana lapas elementā, tādējādi iniciējot dokumenta pārsūtīšanu uz serveri, ir arī praktiska ideja.

Izstrādātājam "vilkšanas un nomešanas" ideja ir manipulācija ar lapas elementiem, manuāli nepārrēķinot tagu koordinātas un izmērus, iespēja atlasīt vairākus elementus un tos izlīdzināt, kā arī pārvietot bloku tagu malas.

HTML un CSS — lieliskas valodas tagu un to dizaina stilu apraksti, taču, ja izstrādātājam ir iespēja interaktīvi manipulēt ar lapas elementiem, manuāli nepārrēķinot koordinātas un izmērus, tas padara darbu ērtāku un efektīvāku.

Vienkārša failu pārsūtīšana

"Velciet un nometiet": tulkojums no angļu valodas krievu valodā burtiski izklausās kā "velciet un nometiet". Praksē tas izklausās un darbojas labāk: izvēlējies, pārnes un atlaid – vienkārši un dabiski.

Failu pārsūtīšanas īstenošana lapā uz lapu, serveri vai citai lietošanai ir ļoti vienkārša.

Šajā piemērā vairāki faili darbvirsmā tika atlasīti ar peli (attēls pa kreisi). Uz atlases tika nospiests kreisais peles taustiņš un izvēlētais "gāja" uz grozu. Pati pārlūkprogramma parādīja, kā tas notiek, uzrakstīja “kopijas” mājienu un izveidoja pārvietojamo failu kontūras.

Kad pele bija virs groza, apmeklētājs atlaida peles kreiso pogu, notika vilkšanas un nomešanas pasākums un vietnes lapā (apakšējā attēlā) JavaScript kods varēja saņemt un apstrādāt visus failus, ko apmeklētājs iesniedza lapa (vietne).

Īstenošanas apraksts

Kods, kas veic šo procedūru, ir ļoti vienkāršs. Pat iesācējs izstrādātājs var to atkārtot jebkurā lietošanas gadījumā.

Šeit lietotāja interfeisu attēlo divi tagi: scPlaceFile (tas ir pats grozs, kurā vēlaties ievietot failus) un scPlaceFiles (tas ir failu apstrādes rezultāts, šajā gadījumā to saraksts).

Lapas loģika ir šāda. Kad lapa tiek ielādēta pārlūkprogrammā, "ondrop" notikumu apstrādātājs tiek piešķirts grozā - lieciet, pārējie notikumi tiek bloķēti un netiek izmantoti.

Lapa darbojas normāli, bet tiklīdz apmeklētājs atlasīs failu (failus) un aizvelk tos uz groza attēlu, tas ir, uz scPlaceFile tagu, notikums “faili ir atnākuši” tiks apstrādāts.

Šis apdarinātājs vienkārši parāda failu sarakstu. To numurs ir event.dataTransfer.files.length, un informācija par katru failu ir event.dataTransfer.files[i].name. Ko darīt ar saņemtajiem datiem, nosaka izstrādātājs, šajā gadījumā vienkārši tiek izveidots saņemto failu saraksts.

Pēc apstrādes notikums tiek bloķēts un netiek izplatīts. Tas nepieciešams, lai pārlūkprogramma neiesaistītos amatieru darbībās un netraucētu saņemtās informācijas apstrādi.

DnD un ārējie dati

Šajā tehnoloģijā ierasta prakse ir attēlu augšupielāde serverī, izmantojot vilkšanas un nomešanas metodi. Parasti izstrādātājs izveido faila augšupielādes veidlapu (1), kas darbojas parastajā veidā (2). Apmeklētājs var parastais režīms atlasiet failus un augšupielādējiet tos.

Taču, ja apmeklētājs velk un nomet uz noteiktu vietu formā, tad faila nosaukuma lauks (faili) tiks aizpildīts automātiski.

Šis labs lēmums. Protams, ir ļoti grūti atzīt, ka datorā nav peles. Bet labāk ir izstrādāt lietotāja interfeisu parastajā veidā un DnD ieviešanā.

DnD un iekšējie dati

Rūpēties par apmeklētāja interesēm vienmēr ir svarīgi, taču svarīgas ir arī izstrādātāja rūpes. Jūs varat ieviest "velciet un nometiet" ne tikai ar standarta līdzekļiem, bet arī apstrādājot peles notikumus lapas elementos.

Pastāvīgi rodas uzdevums aprēķināt tagu koordinātu vērtības un to izmērus. Manuāls aprēķins ir laba prakse, taču interaktīvā iespēja ir ērtāka. Visiem tagiem vienmēr ir taisnstūra forma, un, pārraugot peles notikumus elementu malās, varat izveidot iespēju automātiski pārvietot elementus uz pareizo vietu lapā vai tos mainīt.

Peles pogas klikšķa notikuma apstrāde - klikšķa atrašanās vietas koordinātu atcerēšanās, piemēram, viena no elementa malām. Pārvietojiet peli - sāns virzās vēlamajā virzienā. Atlaižot peles pogu - sāns apstājas un mainās tās koordinātas. Tādā veidā jūs varat mainīt elementa pozīciju vai tā izmēru.

Tas nav formāli vilkšana un nomešana, taču efekts ir līdzīgs un praktisks. Izgatavojot universālus apdarinātājus jebkuram lapas elementam, jūs varat iegūt labu interaktīvu rezultātu, paātrināt izstrādi un vienkāršot kodu.

Vizuālā un manuālā programmēšana

Pele datorā un pirksti viedtālrunī ir pilnīgi atšķirīgas pieejas lietotāja interfeisa (apmeklētāja, izstrādātāja) ieviešanai. Tā ir pilnīgi dabiska un mūsdienīga prasība saderībai ar vairākām pārlūkprogrammām.

Tas viss kopā apgrūtina lapu izveidi, taču, pielietojot tajā vilkšanas un nomešanas ideju standarta forma, izmantojot tās notikumus, apvienojot šo ideju ar parastajiem notikumiem uz elementiem, var īstenot mehānismu, kurā lapas izveide notiks vizuāli.

Tagad apskatīsim elementa vai elementu atlasi. Atlases fakts - konteksta izvēlnes izskats, piemēram, mērķis ir līdzināt atlasīto (pa kreisi, pa labi, centrā), vai sadalīt elementus vertikāli vai horizontāli ar vienu un to pašu soli, vai mainīt to lielumu (minimālo, maksimālo).

Automātiska koordinātu un izmēru pārrēķināšana ir vēlama, nevis manuāla. Mazāk kļūdu – mērķis tiek sasniegts ātrāk. Turklāt jūs varat izveidot lapu vienā pārlūkprogrammā, saglabāt elementu pozīciju un izmērus. Atverot šo lapu viedtālrunī, varat labot koordinātas un izmērus un atcerēties tos konkrēts modelis viedtālruņa vai pārlūkprogrammas versija.

Tādējādi tajā pašā lapā bez manuālas atbilstības prasībai par saderību ar vairākām pārlūkprogrammām tiks parādīti atšķirīgi dati dažādas ierīces un dažādās pārlūkprogrammās.

Ja jūs atļaujat apmeklētājam šīs procedūras veikt pašam, kā arī atlasāt nepieciešamos lapas elementus no izstrādātāja nodrošinātajiem, ir iespējams nodrošināt starppārlūkprogrammu savietojamību un nepieciešamo lapas funkcionalitāti, ņemot vērā lietotāja viedoklis.

Vilkšanas un nomešanas funkcija var palīdzēt uzlabot jūsu iPad veiktspēju. Lūk, kā to var izmantot.

Lai jūs varētu pārvietot failu no viena mākoņa krātuves pakalpojuma uz citu, kopēt tekstu no Safari teksta rediģēšanas lietotnē, lai pievienotu citātu vai izveidotu dublējums noteiktus fotoattēlus failu glabāšanas lietojumprogrammā.

Kā vilkt un nomest fotoattēlus, failus un tekstu

1. Pieskarieties fotoattēlam, failam vai izceltam tekstam, kuru vēlaties vilkt uz citu lietotni, un turiet.

2. Velciet elementu uz vajadzīgo vietu šo pieteikumu vai citu, ko esat atvēris skatā Slide Over vai Split View un atlaidiet.

Kā vilkt un nomest vairākus fotoattēlus vai failus vienlaikus

1. Pieskarieties un turiet kādu no fotoattēliem vai failiem, ko vēlaties vilkt.

2. Velkot pašreizējo vienumu, pieskarieties citam fotoattēlam vai failam, kuru arī vēlaties vilkt. Dariet to vēlreiz, izmantojot tik daudz elementu, cik vēlaties pārvietot.

3. Velciet visus atlasītos objektus uz to norādīto vietu citā lietojumprogrammā, kuru esat atvēris slaidā pāri vai sadalītajā skatā, un atlaidiet tos.

Kā vilkt tekstu no vienas lietojumprogrammas uz citu

1. Pieskarieties un turiet teksta daļu, kuru vēlaties vilkt, lai to atlasītu.

2. Izmantojiet atlases punktus, lai iezīmētu pārējo tekstu, kuru vēlaties vilkt.

3. Nospiediet un turiet atlasīto tekstu.

4. Velciet tekstu uz lietojumprogrammu, kur vēlaties to ievietot, un atlaidiet to.

Kā mainīt ikonu pozīciju vairākām lietojumprogrammām vienlaikus, izmantojot "velciet un nometiet"

Lai gan lielākā daļa iOS vilkšanas un nomešanas funkciju darbojas tikai iPad, šis triks faktiski darbojas gan iPhone, gan iPad. Tas ļauj sakārtot lietojumprogrammu atrašanās vietu sākuma ekrānā, izmantojot « Velciet un nometiet", nevis pārvietojiet tos pa vienam.

1. Pieskarieties un turiet lietotnes ikonu, kuras novietojumu vēlaties mainīt sākuma ekrānā.

2. Pieskarieties papildu programmām, kuras arī vēlaties pārvietot.

3. Velciet šīs lietotnes uz lapu vai mapi, kur tās vēlaties, un nometiet tās.

182

Šajā piemērā mēs atlasām div elementu un padarām to pārvietojamu, izsaucot to draggable() metode. Kā redzams attēlā zemāk, atvērtajā dokumentā elements ieņem savu ierasto pozīciju, bet pēc tam to var pārvietot ar peles rādītāju uz jebkuru vietu pārlūkprogrammas logā:

Vilkšanas un nomešanas funkcija ir noderīga pati par sevi, taču tā ir vēl noderīgāka, ja to izmanto kopā ar nolaižamo mijiedarbību, kas aprakstīta tālāk.

Velkama mijiedarbība tiek īstenota, tikai izmantojot īpašus HTML marķējumus un CSS stilus. Tas nozīmē, ka šī funkcionalitāte darbosies gandrīz jebkurā pārlūkprogrammā, taču ar to apveltītie elementi nevarēs darboties ar līdzīgām vietējām vilkšanas un nomešanas iespējām. operētājsistēmas.

HTML5 specifikācijā noteiktās vilkšanas un nomešanas darbības parasti tiek ieviestas, izmantojot vietējos operētājsistēmas mehānismus. Ja izmantojat jQuery UI vilkšanas un nomešanas mehānismu, vislabāk ir atspējot HTML5 ekvivalentus, lai izvairītos no konfliktiem. Lai to izdarītu, iestatiet dokumenta pamatteksta elementa vilkšanas atribūtu uz false.

Velkamās mijiedarbības pielāgošana

Velkamajai mijiedarbībai ir daudz pielāgošanas iespēju. Tālāk esošajā tabulā ir apkopotas svarīgākās īpašības, kas aplūkotas turpmākajās sadaļās.

Velkamās mijiedarbības īpašības

Īpašums	Apraksts
ass	Ierobežo kustību noteiktos virzienos. Noklusējuma vērtība ir false, kas nozīmē, ka nav ierobežojumu, taču varat norādīt arī vērtību "x" (pārvietot tikai pa x asi) vai "y" (pārvietot tikai pa y asi).
ierobežošana	Ierobežo peldošā elementa atrašanās vietu noteiktā ekrāna apgabalā. Atbalstītie vērtību veidi ir aprakstīti tālāk esošajā tabulā ar atbilstošu piemēru. Noklusējuma vērtība ir nepatiesa, tas nozīmē, ka nav ierobežojumu
kavēšanās	Norāda laiku, cik ilgi elements ir jāvelk, pirms tas tiek pārvietots. Noklusējuma vērtība ir 0, kas nozīmē, ka nav kavēšanās
attālums	Norāda attālumu, kādā lietotājam ir jāvelk elements no sākuma pozīcijas, pirms tas faktiski tiek pārvietots. Noklusējuma vērtība ir 1 pikselis
režģis	Piespiež pārvietoto elementu saistīt ar režģa šūnām. Noklusējuma vērtība ir false, kas nozīmē, ka nav saistoša

Kustības virzienu ierobežošana

Ir vairāki veidi, kā jūs varat ierobežot elementa kustību noteiktos virzienos. Pirmais no tiem ir ass opcijas izmantošana, kas ļauj ierobežot kustības virzienu līdz X vai Y asij. Piemērs ir parādīts zemāk:

...

Palaist piemēru

Šajā piemērā mēs definējam divus div elementus, atlasiet tos ar jQuery un izsauciet draggable() metodi. Šī metode tiek nodota objektam, kas sākotnēji ierobežo abus divvirzienu pārvietošanos pa x virzienu. Pēc tam izmantojot jQuery filtra() metodi, mēs varam atlasīt dragV elementu, jQuery vēlreiz nemeklējot visu dokumentu un iestatīt to uz citu atļauto kustību. virziens - pa Y asi Tādējādi iegūstam dokumentu, kurā vienu div elementu var vilkt tikai vertikālā virzienā, bet otru - tikai horizontālā virzienā. Rezultāts ir parādīts attēlā:

Elementa pārvietošanas pieļaujamās platības ierobežošana

Varat arī ierobežot ekrāna apgabalu, kurā varat vilkt elementu. Šim nolūkam tiek izmantota ierobežošanas iespēja. Vērtību formāti, ko var norādīt šajā opcijā, ir aprakstīti tālāk esošajā tabulā.

Tālāk ir parādīts ierobežošanas opcijas izmantošanas piemērs:

...

Palaist piemēru

Šajā piemērā abi elementi ir jāpārvieto, lai tos varētu tikai vilkt iekšā vecāku elements, kas ir fiksēta izmēra div elements. Vienam no kustīgajiem elementiem, kurā ir ievadīta opcija ass papildu ierobežojums, kas nozīmē, ka tas var pārvietoties tikai horizontāli vecākelementa iekšpusē. Rezultāts ir parādīts attēlā:

Ierobežo iespēju pārvietot elementu uz režģa šūnām

Režģa opcija ļauj iestatīt pārvietotā elementa saistīšanu ar režģa šūnām. Šī opcija pieņem divu elementu masīvu, kas norāda režģa šūnu platumu un augstumu pikseļos. Tālāk ir parādīts režģa opcijas izmantošanas piemērs.

...

Palaist piemēru

Šajā piemērā režģis ir iestatīts uz 100 pikseļu platumu un 50 pikseļu augstumu. Velkot elementu, tas "lec" no vienas (neredzamās) šūnas uz otru. Snapping efekts ir lielisks izmantošanas gadījums mijiedarbības funkcionalitātei, taču to ir grūti izteikt, izmantojot ekrānuzņēmumus.

Varat izveidot fiksēšanas efektu tikai vienā virzienā, iestatot brīvās kustības asi uz 1. Piemēram, ja iestatāt režģa opciju uz , elements tiks fiksēts līdz 100 pikseļu platām režģa šūnām, pārvietojoties horizontāli, bet tas pārvietosies brīvi vertikāli. .

Ceļojuma aizkavēšanās

Ir divas iespējas, kas ļauj aizkavēt peldošā elementa vilkšanu. Izmantojot aizkaves opciju, varat iestatīt laiku milisekundēs, kas lietotājam jāvelk peles rādītājs, pirms elements tiek faktiski pārvietots. Cita veida aizkavi nodrošina attāluma opcija, kas norāda attālumu pikseļos, kas lietotājam jāvelk peles rādītājs, pirms tam seko elements.

Abu iestatījumu izmantošanas piemērs ir parādīts zemāk:

...

Palaist piemēru

Šajā piemērā ir divi peldoši elementi, no kuriem vienam ir iestatīta aizkave ar aizkaves opciju, bet otram ar attāluma opciju.

Aizkaves opcijas norādītās aizkaves gadījumā lietotājam ir jāvelk norādītais laiks, pirms tas faktiski pārvieto elementu. Šajā piemērā šīs atstarpes ilgums ir 1000 ms. Šajā laikā peli nav jāpārvieto, bet peles pogai jāpaliek nospiestai visu aizkaves periodu, pēc kura elementu var pārvietot, pārvietojot peli. Kad aizkaves laiks ir pagājis, pārvietojamais elements nofiksēsies peles rādītāja pozīcijā, ievērojot ierobežojumus, ko nosaka iepriekš apspriestās režģa, reģiona un ass opcijas.

Attāluma opcijai ir līdzīgs efekts, taču šajā gadījumā lietotājam ir jāvelk peles kursors vismaz noteiktais pikseļu skaits jebkurā virzienā no elementa sākuma vietas. Pēc tam pārvietotais vienums pāries uz pašreizējo rādītāja atrašanās vietu.

Ja vienam un tam pašam elementam lietojat abus iestatījumus, tad pārvietojamais elements netiks pārvietots, kamēr nav izpildīti abi aizkaves kritēriji, t.i. līdz mēģinājums vilkt elementu ilgst norādīto laiku un līdz peles rādītājs pārvieto norādīto pikseļu skaitu.

Vilkšanas mijiedarbības metožu izmantošana

Visas vilkšanas mijiedarbībai definētās metodes ir daļa no pamatmetožu kopas, kuras jau esat redzējis logrīkos. Metodes, kas raksturīgas velkamajai mijiedarbībai, netiek nodrošinātas, tāpēc mēs tās sīkāk neapskatīsim. Pieejamo metožu saraksts ir parādīts tabulā:

Vilkamo mijiedarbības notikumu izmantošana

Velkama mijiedarbība atbalsta vienkāršu notikumu kopu, kas paziņo, kad elements tiek vilkts. Šie notikumi ir aprakstīti tabulā:

Tāpat kā ar logrīku notikumiem, arī uz šiem notikumiem var reaģēt. Tālāk ir parādīts sākuma un beigu notikumu apstrādes piemērs:

...

Palaist piemēru

Šajā piemērā tiek izmantoti sākuma un beigu notikumi, lai vilkšanas procesa laikā mainītu elementa teksta saturu. Šī priekšrocība izriet no fakta, ka vilkšanas mijiedarbība tiek pilnībā ieviesta, izmantojot HTML un CSS: varat izmantot jQuery, lai mainītu peldošā elementa stāvokli pat tad, kad tas pārvietojas pa ekrānu.

Izmantojot nolaižamo mijiedarbību

Dažās situācijās var pietikt ar elementa vilkšanu vien, taču tas ir visnoderīgākais, ja to izmanto kopā ar nolaižamo mijiedarbību.

Elementi, kuriem ir piemērota nolaižamā mijiedarbība (akceptējošie elementi), iegūst iespēju pieņemt nolaižamos elementus, kas izveidoti ar vilkšanas mijiedarbību.

Saņemošie elementi ir izveidoti ar dropable() metode, taču, lai iegūtu noderīgu funkcionalitāti, jums būs jāizveido notikumu apstrādātāji no tiem, kas definēti šāda veida mijiedarbībai. Pieejamie notikumi ir parādīti tabulā zemāk:

Nolaižami mijiedarbības notikumi

Pasākums	Apraksts
izveidot	Notiek, ja elementam tiek lietota nolaižamā mijiedarbība
aktivizēt	Rodas, kad lietotājs sāk vilkt peldošu elementu
deaktivizēt	Rodas, kad lietotājs pārtrauc peldošā elementa vilkšanu
beidzies	Rodas, kad lietotājs velk peldošo elementu virs saņēmēja elementa (bet pieņemot, ka peles poga vēl nav atlaista)
ārā	Rodas, kad lietotājs velk peldošo elementu ārpus saņemošā elementa
piliens	Rodas, kad lietotājs atstāj peldošu elementu uz saņemošā elementa

Tālāk ir sniegts vienkārša saņemšanas elementa izveides piemērs ar vienu nolaišanas notikumu apstrādātāju.

...

Palaist piemēru

Šajā piemērā dokumentam ir pievienots elements div, kura teksta saturu attēlo virkne "Atstājiet to šeit". Mēs atlasām šo elementu, izmantojot jQuery, un izsaucam droppable() metodi, nododot tai iestatījumu objektu, kas definē nomešanas notikuma apdarinātāju. Reakcija uz šo notikumu ir mainīt peldošā elementa tekstu, izmantojot metodi text().

Šajā piemērā izveidotā interaktīvā vilkšanas un nomešanas pieredze ir visvienkāršākā, taču tā nodrošina noderīgu kontekstu iespēju izskaidrošanai. kopīgs darbs Velkamas un nolaižamas mijiedarbības. Dažādi elementu vilkšanas un nomešanas procesa posmi ir parādīti attēlā:

Tas viss izskatās ļoti vienkārši. Mēs velkam pārvietojamo elementu, līdz tas atrodas virs uztverošā elementa, un atlaižam to. Nomestais elements paliek tur, kur tas tika atstāts, un tā teksta saturs mainās, reaģējot uz nomešanas notikumu. Nākamajās sadaļās ir parādīts, kā izmantot citus nolaižamās mijiedarbības notikumus, lai uzlabotu lietotāja pieredzi.

Mērķa saņemšanas objekta izcelšana

Izmantojot aktivizēšanas un deaktivizēšanas notikumus, varat izcelt mērķa saņemšanas objektu, kad lietotājs sāk elementa vilkšanas procesu. Daudzās situācijās šī ideja ir ļoti auglīga, jo tā sniedz lietotājam ticamu norādi par to, kuri elementi ir daļa no vilkšanas un nomešanas modeļa. Attiecīgais piemērs ir parādīts zemāk:

... $(function() ( $("#velkamais").velkamais(); $("#nometams").nometams(( drop: function()) ( $("#velkamais").text("Nomests" ") ), aktivizēt: function() ( $("#droppable").css(( apmale: "vidēji dubultzaļa", fona krāsa: "gaiši zaļa" )); ), deaktivizēt: function() ( $("#nometams" ").css("border", "").css("fona krāsa", ""); ) )); )); ... Palaidiet piemēru

Tiklīdz lietotājs sāk vilkt elementu, aktivizācijas notikums, kas saistīts ar mūsu saņemšanas elementu, tiek aktivizēts, un apstrādātāja funkcija izmanto metodi css(), lai mainītu. CSS īpašuma robeža un šī elementa fona krāsa. Rezultātā tiek izcelts mērķa saņemšanas elements, norādot lietotājam, ka starp to un pārvietojamo elementu ir savienojums.

Deaktivizēšanas notikums tiek izmantots, lai noņemtu CSS rekvizītu vērtības no saņēmēja elementa un atiestatītu to, tiklīdz lietotājs atlaiž peles pogu. (Šis notikums tiek aktivizēts ikreiz, kad tiek pārtraukta elementa vilkšana, neatkarīgi no tā, vai vilktais elements ir atstāts uz saņēmēja elementa vai nē.) Šis process ir parādīts attēlā:

Elementu pārklāšanās apstrāde

Vilkšanas un nomešanas tehnoloģiju var uzlabot, pievienojot tai notikumu apstrādi. Pārsniegšanas notikums notiek, kad 50% no pārvietotā elementa atrodas virs jebkuras saņemošā elementa daļas. Izejas notikums tiek aktivizēts, kad elementi, kas iepriekš pārklājās, vairs nepārklājas. Tālāk ir parādīts atbildes piemērs uz šiem notikumiem:

$(function() ( $("#velkamais").velkamais(); $("#nometams").nometams(( drop: function()) ( $("#velkamais").text("Nomests") ) , aktivizējiet: function() ( $("#droppable").css(( apmale: "vidēji dubultzaļa", backgroundColor: "lightGreen" )); ), deaktivizējiet: function() ( $("#nometams"). css("border", "").css("background-color", ""); ), over: function() ( $("#droppable").css(( apmale: "vidēji dubultsarkans", backgroundColor : "sarkans" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ); Palaist piemēru

Šeit tiek izmantotas tās pašas apstrādātāja funkcijas, kas iepriekšējā piemērā, taču šajā gadījumā tās ir saistītas ar notikumiem over and out. Kad vismaz 50% peldošā elementa pārklājas ar uztverošo elementu, tas tiek ierāmēts un mainās tā fona krāsa, kā parādīts attēlā:

Šo 50% robežu sauc par pielaides slieksni, kuru var iestatīt, veidojot uztverošo elementu, kā tas tiks parādīts tālāk.

Nolaižama mijiedarbības iestatīšana

Nolaižamajai mijiedarbībai ir vairāki rekvizīti, kurus varat modificēt, lai pielāgotu tās darbību. Šīs īpašības ir norādītas zemāk esošajā tabulā:

Nolaižamās mijiedarbības īpašības

Īpašums	Apraksts
invalīds	Ja šī opcija ir patiesa, nolaižamās mijiedarbības funkcionalitāte sākotnēji ir atspējota. Noklusējuma vērtība ir nepatiesa
pieņemt	Sašaurina peldošo elementu kopu, uz kuru reaģēs saņemošais elements. Noklusējuma vērtība ir *, tā atbilst jebkuram elementam
aktīvā klase	Definē klasi, kas tiks piešķirta, reaģējot uz aktivizēšanas notikumu, un noņemta, reaģējot uz deaktivizēšanas notikumu
hoverClass	Definē klasi, kas tiks piešķirta, reaģējot uz pārsnieguma notikumu, un noņemta, reaģējot uz izslēgtu notikumu.
tolerance	Norāda minimālo pārklāšanās pakāpi, pie kuras notiek pārsniegšanas notikums

Atļauto peldošo elementu ierobežojums

Varat ierobežot nolaižamo elementu kopu, ko pieņems elements, kuram ir nolaižamās savietojamības funkcionalitāte, izmantojot akceptēšanas opciju. Pieņemšanas opcijas vērtībai ir jābūt atlasītājam. Šī notikuma rezultātā nolaižamā mijiedarbība notiks tikai tad, ja pārvietotais elements atbilst norādītajam atlasītājam. Attiecīgais piemērs ir parādīts zemāk:

...

Palaist piemēru

Šajā piemērā ir divi peldoši elementi ar ID drag1 un drag2. Veidojot pieņemšanas elementu, tiek izmantota akceptēšanas opcija, ar kuru mēs norādām, ka tikai drag1 elements būs pieņemams peldošais elements.

Velkot drag1 elementu, jūs redzēsiet tādu pašu efektu kā iepriekšējos piemēros. Aktivizēšanas, deaktivizēšanas, pārtraukšanas un izslēgšanas notikumi attiecīgajā laikā tiks aktivizēti saņēmējā elementā. Tajā pašā laikā, ja velciet drag2 elementu, kas neatbilst akceptēšanas parametrā norādītajam atlasītājam, šie notikumi netiks aktivizēti. Šo elementu var brīvi pārvietot, bet saņemošais elements to nepieņems.

Ņemiet vērā izmaiņas veidā, kādā atlasāt pieņemamu peldošo elementu, kuram izsaukt tekstu() metodi. Ja dokumentā bija tikai viens peldošais elements, tam pietika ar id atribūtu:

Nomest: function() ( $("#velkamais").text("Nomests") ),

Šajā piemērā ir divi peldošie elementi, un atlase pēc atribūta id nedos vēlamo rezultātu, jo teksts šajā gadījumā vienmēr mainīsies vienā un tajā pašā peldošajā elementā, neatkarīgi no tā, kurš no tiem ir pieņemams saņēmējam elementam.

Risinājums ir izmantot UI objektu, ko jQuery UI nodrošina kā papildu argumentu katram notikumu apstrādātājam. UI objekta velkamais rekvizīts atgriež jQuery objektu, kurā ir elements, kuru lietotājs velk vai mēģina nomest uz mērķa elementa, ļaujot atlasīt vajadzīgo elementu šādi:

Nomest: funkcija(notikums, ui) ( ui.draggable.text("Nomests")),

Pārklāšanās sliekšņa maiņa

Pēc noklusējuma pārejas notikums tiek aktivizēts tikai tad, ja vismaz 50% no pārvietotā elementa pārklājas ar saņemošo elementu. Šī sliekšņa pārklāšanās apjomu var mainīt, izmantojot pielaides opciju, kas var iegūt vērtības, kas parādītas zemāk esošajā tabulā:

Divas vērtības, kuras es visbiežāk izmantoju — pielāgot un pieskarties — lietotājiem ir vispiemērotākās. Es izmantoju fit vērtību, kad vilktam elementam jāpaliek uztverošā elementa apgabalā, kur tas tika pārvietots, un pieskāriena vērtību, kad vilktam elementam jāatgriežas sākotnējā pozīcijā (piemērs tiks sniegts vēlāk). Pielāgošanas un pieskāriena parametru izmantošanas piemērs ir parādīts zemāk:

Klona vērtība liek jQuery UI izveidot peldošā elementa kopiju kopā ar visu tā saturu un izmantot rezultātu kā palīgelementu. Rezultāts ir parādīts attēlā:

Palīgelements tiek noņemts, kad lietotājs atlaiž peles pogu virs pārvietojamā elementa, atstājot pārvietojamo elementu un uztverošo elementu sākotnējā stāvoklī.

Kā parādīts attēlā, sākotnējais peldošais elements paliek savā vietā un tikai palīgelements pārvietojas pa ekrānu pēc peles rādītāja. Ja pārvietojamā elementa izmērs ir liels, kā tas ir mūsu piemērā, tad tas aptver pārējos dokumenta elementus, tāpēc lietotājam būs grūti pat izsekot saņemošā elementa atrašanās vietai. Šo problēmu var atrisināt, norādot funkciju kā palīga opcijas vērtību, kā parādīts tālāk esošajā piemērā:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#grozs").droppable(( activeClass: "active", hoverClass: "hover" )); )); ... Palaidiet piemēru

Kad lietotājs sāk vilkt elementu, jQuery UI izsauc funkciju, parametrs palīgs un izmanto atgriezto elementu kā pārvietojamu objektu. Šajā gadījumā es izmantoju jQuery, lai izveidotu img elementu. Rezultāts ir parādīts attēlā:

Mazais attēls darbojas kā peldošā elementa vietturis, kas ievērojami atvieglo citu elementu izsekošanu dokumentā.

UI objekts, ko jQuery lietotāja saskarne nodod nolaižamiem mijiedarbības notikumiem, satur palīga rekvizītu, un šo rekvizītu var izmantot, lai manipulētu ar palīgelementu, kamēr tas tiek vilkts. Tālāk ir parādīts šī rekvizīta izmantošanas piemērs saistībā ar notikumiem over and out:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#grozs").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "tick solid #27e6ed")) , out: function(event, ui) ( ui.helper.css("border", "") ) )); )); ...

Šeit tiek izmantoti notikumi over and out un rekvizīts ui.helper, lai parādītu apmali ap palīgelementu, kad tas pārklājas ar saimniekdatora elementu. Rezultāts ir parādīts attēlā:

Piestipriniet pie elementu malām

Caur snap opcijas ir iespējams panākt, ka pārvietojamais elements tiek "pievilkts" pie elementu malām, kurām tas iet blakus. Šīs opcijas vērtība ir atlasītājs. Peldošais elements tiks piestiprināts pie jebkura elementa malām, kas atbilst norādītajam atlasītājam. Snap opcijas izmantošanas piemērs ir parādīts zemāk:

Palaist piemēru

Kad kustīgais elements tuvojas vienam no saskaņotajiem elementiem, tas tiek "pievilkts" pie tā tā, lai to blakus esošās malas saskaras. Šādai iesiešanai varat atlasīt jebkuru elementu, ne tikai saņemošo. Šajā piemērā esmu pievienojis div elementu un iestatījis snap opciju uz vērtību, kas atlasa šo elementu dokumentā, kā arī saņemošo elementu.

Ir dažas apakšopcijas, kas ļauj precīzi noregulēt elementu darbību attiecībā uz noenkurošanu. Viens no tiem ir snapMode opcija. To var izmantot, lai norādītu iesiešanas veidu. Ir atļautas šādas vērtības: iekšējais(piestipriniet pie elementu iekšējām malām), ārējā(piestipriniet pie elementu ārējām malām) un gan(piestipriniet pie visām malām; noklusējuma).

snapTolerance opcijaļauj norādīt, cik tālu peldošajam elementam ir jātuvojas mērķa elementa malai, pirms notiek fiksēšana. Noklusējuma vērtība ir 20, kas nozīmē 20 pikseļus. Piemērā tiek izmantota vērtība 50, kas atbilst enkuram lielākā attālumā. Ir ļoti svarīgi izvēlēties pareizo vērtību šai opcijai. Ja opcijas snapTolerance vērtība ir pārāk zema, lietotājs var nepamanīt snapping efektu, un, ja tā ir pārāk augsta, pārvietojamais elements sāks negaidīti lēkt, pieskaroties elementiem, kas atrodas tālu.

VCL bibliotēkai Borland ir ieviesis savu Drag&Drop interfeisa versiju (tulkojumā kā "velciet"). Šis interfeiss ir iekšējs - jūs varat nosūtīt un saņemt jebkuras Delphi vadīklas formas iekšpusē (izņemot pašu veidlapu). Tas ir ieviests, neizmantojot atbilstošās Windows API funkcijas - tās ir jāizmanto, organizējot saziņu ar citiem uzdevumiem, velkot un nometot .

Nospiežot peles kreiso pogu virs vadīklas, mēs varam to "vilkt" uz jebkuru citu elementu. No programmētāja viedokļa tas nozīmē, ka atslēgas vilkšanas un atlaišanas brīžos tiek ģenerēti noteikti notikumi, kas pārraida visu nepieciešamo informāciju - rādītājs uz velkamo objektu, pašreizējās kursora koordinātas utt. Notikumu uztvērējs ir elements. uz kura Šis brīdis kursors atrodas. Šāda notikuma apstrādātājam ir jāpaziņo sistēmai, vai dotā vadīkla pieņem "sūtīšanu" vai nē. Atlaižot pogu virs uztvērēja vadības pults, atkarībā no uztvērēja gatavības tiek aktivizēts vēl viens vai divi notikumi.

AtceltVelciet Atceļ pašreizējo vilkšanas un nomešanas vai vilkšanas un novietošanas darbību.

Funkcija FindDragTarget (const Pos: TPoint ;AllowDisabled: Boolean ): TControl ;

Funkcija atgriež bāzes klases objektu TControl , kas attiecas uz ekrāna pozīciju ar koordinātām, kas norādītas parametrā Pos. Šo funkciju izmanto, lai noteiktu iespējamo vilkšanas un nomešanas vai vilkšanas un novietošanas darbības saņēmēju. Ja norādītajai pozīcijai nav loga vadīklas, funkcija atgriežas nulle . Parametrs AllowDisabled nosaka, vai tiks ņemti vērā atspējotie objekti.

Funkcija IsDragObject(Sūtītājs: TObject): Būla ;

Funkcija nosaka, vai parametrā Sender norādītais objekts ir klases pēctecis TDragObject . Šī funkcija var izmantot kā avota parametru OnDragOver un OnDockOver notikumu apdarinātājos, lai noteiktu, vai vilktais objekts tiks pieņemts. Arī funkcija IsDragObjectvar izmantot kā avota parametru OnDragDrop un OnDockDrop notikumu apdarinātājos, lai pareizi interpretētu vilkto objektu.

DragMode, DragCursor rekvizīti, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag metodes, Akceptēt parametru

Informācijas vilkšanas process no viena objekta uz otru ar peli tiek plaši izmantots programmā Widows. Varat pārvietot failus starp mapēm, pārvietot pašas mapes un daudz ko citu.

Visi rekvizīti, metodes un notikumi, kas saistīti ar vilkšanas un nomešanas procesu, ir definēti TControl klasē, kas ir visu Delphi vizuālo komponentu vecākais. Tāpēc tie ir kopīgi visām sastāvdaļām.

Vilkšanas sākumu nosaka rekvizīts DragMode, ko var iestatīt projektēšanas laikā vai programmatiski vienādu ar dmManual vai dmAutomatic. Vērtība dmAutomatic (automatic) nosaka automātisku vilkšanas procesa sākumu, kad lietotājs noklikšķina peles pogu virs komponenta. Tomēr šajā gadījumā OnMouseDown notikums, kas saistīts ar lietotāja peles pogas nospiešanu, šim komponentam vispār nenotiek.

Komponentu pārsūtīšanas un saņemšanas saskarne parādījās jau sen. Tas nodrošina mijiedarbību starp divām vadīklām lietojumprogrammas izpildes laikā. Šajā gadījumā var veikt visas nepieciešamās darbības. Neskatoties uz ieviešanas vienkāršību un izstrādes vecumu, daudzi programmētāji (īpaši iesācēji) uzskata, ka šis mehānisms ir neskaidrs un eksotisks. Tomēr vilkšanas un nomešanas izmantošana var būt ļoti noderīga un viegli īstenojama. Tagad mēs to pārbaudīsim.

Lai mehānisms darbotos, attiecīgi jākonfigurē divas vadības ierīces. Vienam jābūt avotam (Source), otrajam - uztvērējam (Target). Šajā gadījumā avots nekur nepārvietojas, bet tikai kā tāds tiek reģistrēts mehānismā.

Ticiet man, to ir pietiekami viegli pārveidot X,Y koordinātas, kas ir nodoti OnDragOver un OnDragDrop notikumu parametros formas koordinātēs.

Strādājiet ar tā komponenta rekvizītiem pa kreisi un augšpusi, virs kura virza kursoru. Es sniegšu vienkāršu piemēru. Ievietojiet veidlapā Memo komponentu un iestatiet tā rekvizītu Align uz alTop. Ievietojiet veidlapā paneli, iestatiet arī rekvizītu Align uz alTop un iestatiet rekvizītu Height uz nelielu vērtību, piemēram, 6 vai 7 pikseļi. Iestatiet DragMode uz dmAutomatica un DragCursor uz crVSplit. Ievietojiet citu Memo komponentu un iestatiet Align to alClient. Atlasiet abas piezīmes vienlaikus, paneli un izveidojiet kopīgu OnDragOver notikumu apdarinātāju, kā parādīts tālāk:

Nesen man radās ideja izstrādāt android spēli. Sākumā es nolēmu rakstīt šahu. Es domāju par tehnoloģiju Vilkt un nomest lieliski piemērots formu pārvietošanas mehānisma ieviešanai. Nezinātājiem to atzīmēju vilkšanas un nomešanas metode ir iespēju vilkt dažus grafiskos objektus uz citiem un veikt vienu vai otru darbību pēc atbrīvošanas. Vienkāršākais piemērs- noņemiet saīsni no datora darbvirsmas, velkot to uz miskasti. "Iemetot" etiķeti miskastē, mēs sakām sistēmai, ka vēlamies panākt, lai šie divi objekti mijiedarbotos. Sistēma saņem mūsu signālu un izlemj, kāda darbība tai jāveic. Vilkšana un nomešana ir kļuvusi plaši izplatīta tās intuitīvās skaidrības dēļ. Šo pieeju atbalsta mūsu pieredze mijiedarbībā ar reālās pasaules objektiem, un tā lieliski darbojas virtuālajā vidē. Kas attiecas uz šahu, tad, izmantojot vilkšanu un nomešanu, ir tehnoloģiski vieglāk noteikt šūnu, kurā lietotājs vilka figūru, jo nav nepieciešams aprēķināt šūnas numuru no nomešanas punkta koordinātām. Šo darbu pārņems virtuālā mašīna.

Drag n Drop tehnoloģijas izmantošanas mērķi

Izmantojot vilkšanas un nomešanas tehnoloģiju, ar nelielu asiņu daudzumu var atrisināt trīs problēmas:

1. Kustību vizualizācija. Kad lietotājs pieskaras formai un sāk to pārvietot pa ekrānu, forma tiek aizstāta ar mazāku zīmējumu. Tādējādi lietotājs saprot, ka figūra ir uzņemta.
2. Es ierobežoju figūras kustības laukumu līdz tāfeles izmēriem.
3. Ja lietotājs atbrīvo formu nepareizā vietā, tai jāatgriežas sākotnējā stāvoklī.

Uzdevumi noteikti, sāksim to realizāciju.

Nomainiet ImageView pieskaroties

Visas manas formas ir ImageView objekti. Diemžēl izrādījās, ka Drag & Drop ieviešana operētājsistēmā Android neļauj "tieši no kastes" aizstāt objekta attēlu, kad tam pieskaras. Tomēr šis uzdevums ir diezgan atrisināms, izmantojot API. Mums ir jāveic vairākas vienkāršas darbības:

1. Izveidojiet DragShadowBuilder objektu.
2. Izsauciet startDrag metodi.
3. Paslēpiet mūsu ImageView, kas parāda formu, izsaucot setVisibility metodi ar parametru View.INVISIBLE. Rezultātā ekrānā paliks tikai DragShadowBuilder objekts, kas lietotājam signalizēs, ka forma ir uzņemta.

Šīs darbības ir jāievieš ImageView objekta OnTouchListner apdarinātājā. Lai to izdarītu, mēs ignorēsim onTouch metodi:

@Override public Boolean onTouch(Skata skats, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; Skats. DragShadow=dowBuilder jaunsB.DragShadowBuilder View dsragderS (skats) ;view.startDrag(clipData, dsb, view, 0 ) ;view.setVisibility(View.INVISIBLE) ; return true ; ) else ( return false ; ) )

Viss ir ļoti vienkārši. Tātad, kad attēla aizstāšana ir izdomāta, pāriesim pie nākamā uzdevuma.

Vilkšanas apgabala ierobežošana vilkšanas nomešanas funkcijai

Vilkšanas apgabala ierobežošana ir saistīta ar vienu problēmu. Fakts ir tāds, ka, atlaižot formu ārpus tāfeles, nomešanas notikums nenotiks, jo lietotājs objektu nometa tukšā vietā, un objektam nav ar ko mijiedarboties. Rezultātā figūra neatgriezīsies sākotnējā stāvoklī un paliks uz visiem laikiem paslēpta. Esmu pavadījis daudz laika, lasot dokumentāciju, bet neesmu atradis veidu, kā ierobežot objektu vilkšanas laukumu. Atklāsme nāca pēkšņi. Man vispār nav jāierobežo laukums, man jāzina, vai lietotājs ir pareizi izlaidis figūru vai nē.

Pareizās izlaišanas noteikšana
Atbildes uz saviem jautājumiem atradu Android izstrādātāju vietnes sadaļā “Handling end events”. Šeit ir daži galvenie punkti:

1. Kad lietotājs pabeidz vilkšanu, DragListeners apdarinātājā tiek aktivizēts notikums ACTION_DRAG_ENDED.
2. Programmā DragListener varat iegūt detalizētāku informāciju par vilkšanas darbību, izsaucot metodi DragEvent.getResult().
3. Ja DragListener atgriež patieso vērtību, reaģējot uz notikumu ACTION_DROP, izsaukums getResult arī atgriezīs patiesu vērtību, pretējā gadījumā tas atgriezīs vērtību false.

Tāpēc man ir jānoķer ACTION_DRAG_ENDED notikums un jāizsauc metode getResult. Ja tas atgriež false, lietotājs izvilka formu no tāfeles, un man ir jāpadara redzams ImageView.

@Override publisko Būla onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( includeDragable)= else false ; if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( includeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE)Action= (dragAction) else ; = DragEvent. ACTION_DROP& amp;& amp; saturDragable) ( checkForValidMove((ChessBoardSquareLayoutView) skats, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; ) privāts Būla dropEventNotHandled(DragEvent) dragable(DragEvent.Revent. ) ;)

Tagad lietotājs var atbrīvot figūru jebkurā vietā, un nekas briesmīgs nenotiks.

Atļauto kustību noteikšana

Raksta pēdējā daļa ir veltīta lietotāja veiktās kustības derīguma pārbaudei. Pirms šīs tēmas detalizētas apspriešanas, es izteikšu nelielu piezīmi, izskaidrojot mana pieteikuma struktūru. Šaha laukums ir attēlots kā tabulas izkārtojums, un katra šūna ir LinearLayout pēctecis, un tai ir OnDragListener.

Turklāt katrs OnDragListener attiecas uz "starpnieka" objektu, kas rūpējas par spēles objektu mijiedarbību un atceras pašreizējās šūnas pozīciju.

Kad lietotājs velk formu virs šūnas, ir iespējamas šādas darbības:

1. Izmantojot notikumu ACTION_DRAG_ENTERED, lai mainīgajam “containsDraggable” iestatītu vērtību “true”.
2. Notikuma ACTION_DRAG_EXITED izmantošana, lai mainīgajam “containsDraggable” iestatītu vērtību “false”.
3. Notikuma ACTION_DROP izmantošana starpprogrammatūras vaicāšanai, vai šajā šūnā ir atļauts ievietot formu.

Zemāk ir kods, kas īsteno aprakstīto loģiku

@Override publisko Būla onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( includeDragable)= else false ; if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( includeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE)Action= (dragAction) else ; = DragEvent.ACTION_DROP& amp;& amp; saturDragable) ( checkForValidMove((ChessBoardSquareLayoutView) skats, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; )

Kā redzat, neatkarīgi no tā, vai pārvietošana ir derīga, ImageView tiek iestatīts redzamajā stāvoklī. Es gribēju, lai lietotājs redzētu formas kustību. Iepriekš es minēju, ka šūna ir LayoutView atvasinājums. Tas tiek darīts, lai atvieglotu ImageView pārvietošanu no šūnas uz šūnu. Tālāk ir kods metodei checkForValidMove, kas parāda, kā ImageView tiek pārvietots.

private void checkForValidMove(ChessBoardSquareLayoutView skats, View dragView) ( if (mediator. isValidMove(view) ) ( ViewGroup owner= (ViewGroup) dragView. getParent() ; owner. removeView(dragView) ; view. addView(dragView) ; view. setGravity (Gravity.CENTER) ;view.showAsLanded() ;mediator.handleMove(view) ; ) )

Es ceru, ka šis raksts jums palīdzēs, izstrādājot savus projektus.