Dra och släpp-teknik. Dra-och-släpp: Ett sätt att manipulera användargränssnittselement. Full mousemove-kod

Användning av teknik dra och släpp (dra och släpp) låter användaren flytta olika objekt från ett till ett annat, till exempel element från en lista till en annan. För att göra detta måste du använda två kontroller: en diskbänk och en källa. Mottagaren är det objekt som kommer att ta emot källobjektet (rörligt objekt).

Händelserna som inträffar under förflyttning av objekt listas nedan i den ordning som de inträffar.

OnStartDrag(typ TStartDragEvent) - genereras av källobjektet i början av operationen. Parametrar som skickas till händelsehanteraren: DragObject-mottagarobjekt (TDragObject-typ), Source-objekt (TObject-typ).

OnDragOver(typ TDragOverEvent) - skapar ett målobjekt när ett flytande objekt placeras ovanför det. Parametrar som skickas till händelsehanteraren: Avsändarmottagarobjekt (TObject-typ), Källkällobjekt (TObject-typ), State rörelsetillstånd (TDragState-typ), X och Y (heltalstyp) - aktuella koordinater för muspekaren, Acceptera (boolesk typ) ) tecken på bekräftelse av flyttoperationen. Rörelsetillståndet gör det klart om föremålet som flyttas är i mottagarområdet, om det rör sig i det, lämnat det. De angivna parametrarna tillåter mottagarobjektet att acceptera eller avvisa källobjektet. Acceptera parametern är inställd på Trye om flyttoperationen accepteras, annars False.

onDragDrop (typ TDragDropEvent) - Höjd av målobjektet när det dragna objektet släpps på det. Händelsehanteraren skickas de aktuella koordinaterna för muspekaren, avsändarmottagarens objekt (TObject-typ) och det ursprungliga Source-rörelseobjektet (TObject-typ).

onEndDrag (typ EndDragEvent) - Ökas när en dragoperation avslutas. X- och Y-koordinaterna för punkten där Sender-källobjektet och Target-mottagarens objekt skickas till händelsehanteraren.

För att skapa en dra och släpp räcker det att implementera två händelser: OnDragDrop och OnDragOver med egenskapen DragMode inställd på dmAutomatic. Annars måste starten av flyttoperationen, BeginDrag-metoden, kodas av programmeraren.

För att konsolidera materialet kommer vi att skapa följande applikation. Placera en panelkomponent på formuläret. Ställ in egenskapen DragMode för Object Inspector till dmAutomatic. Välj formulärobjektet och använd Object Inspector för att skapa följande händelser:

Procedur TForm1.FormDragOver(Sändare, Källa: TObject; X, Y: Heltal; Tillstånd: TDragState; var Acceptera: Boolean); börja om Källa = Panel1 sedan Acceptera:= Sant annars Acceptera:= Falskt; slutet; procedure TForm1.FormDragDrop(Sändare, Källa: TObject; X, Y: Heltal); beginPanel1.Left:=X; Panel1.Top:=Y; slutet;

Nu, genom att köra programmet och trycka på musknappen över panelen, kan vi flytta panelobjektet genom hela formuläret.

Slutsats: vi bekantade oss med tekniken dra och släpp(dra och släpp) och använde det i praktiken.

Det är lättare att ta något och lägga det än att skriva vad du behöver ta och var du ska lägga det. Naturligtvis, utan en mus eller en liknande enhet, kan du inte välja eller specificera någonting, men även i det nuvarande tillståndet är det väldigt naturligt och bekvämt att använda dra och släpp-idén.

Omfattningen av idén är inte bara nätbutiker, digitala bibliotek, sök eller Informationssystem, men också det applicerade området. Idén är mycket användbar i utvecklingen av webbplatser och deras element, skapade och underhållna interaktivt, utan deltagande av en programmerare.

Beskrivning av idén

Välj, flytta och sätt - idén är naturlig och bekväm. Det är helt enkelt fantastiskt att den inte föddes när musen blev ett oumbärligt tillbehör till datorn.

Det mest uppenbara exemplet är att välja en produkt i en webbutik. Att ta den önskade produkten med musen och dra den till varukorgen är enkelt, naturligt och bekvämt. Filuppladdning: Att ta ett dokument utanför webbläsarfönstret och placera det på ett sidelement, och därmed initiera överföringen av dokumentet till servern, är också en praktisk idé.

För utvecklaren är idén med "dra och släpp" manipulering av sidelement utan att manuellt räkna om koordinaterna och storlekarna på taggar, möjligheten att välja flera element och justera dem och flytta sidorna av blocktaggar.

HTML och CSS är utmärkta språk för att beskriva taggar och utforma dem, men när en utvecklare interaktivt kan manipulera sidelement utan att manuellt räkna om koordinater och storlekar gör detta arbetet mer bekvämt och effektivt.

Enkel filöverföring

"Dra och släpp": översättning från engelska till ryska låter bokstavligen som "dra och släpp." I praktiken låter och fungerar det bättre: välj, överför och släpp - enkelt och naturligt.

Att implementera filöverföringar på en sida till en sida, till en server eller för annat bruk är mycket enkelt.

PÅ detta exempel Flera filer på skrivbordet valdes ut med musen (vänster figur). På urvalet trycktes vänster musknapp och den valda "gick" till korgen. Webbläsaren själv visade hur detta händer, skrev en "kopia"-tips och skapade konturerna av filerna som flyttades runt.

När musen var över korgen släppte besökaren vänster knapp mus, ägde drag och släpp-händelsen rum och på sajtsidan (nedre bilden) kunde JavaScript-koden ta emot och bearbeta alla filer som besökaren lämnade till sidan (sajten).

Implementeringsbeskrivning

Koden som utför denna procedur är mycket enkel. Även en nybörjare kan upprepa det i alla användningsfall.

Här representeras användargränssnittet av två taggar: scPlaceFile (det här är själva korgen där du vill lägga filer) och scPlaceFiles (detta är resultatet av att bearbeta filer, i det här fallet en lista över dem).

Sidans logik är följande. När sidan är laddad i webbläsaren tilldelas "ondrop"-händelsehanteraren i korgen - lägg, resten av händelserna blockeras och används inte.

Sidan fungerar normalt, men så fort besökaren väljer filen (filerna) och drar dem till korgbilden, det vill säga till scPlaceFile-taggen, kommer händelsen "filer har anlänt" att behandlas.

Denna hanterare visar helt enkelt en lista med filer. Deras nummer är i event.dataTransfer.files.length, och information om varje fil finns i event.dataTransfer.files[i].name. Vad man ska göra med den mottagna informationen bestäms av utvecklaren, i det här fallet bildas helt enkelt en lista över mottagna filer.

När händelsen har bearbetats blockeras den och sprids inte. Detta är nödvändigt så att webbläsaren inte deltar i amatöraktiviteter och inte stör behandlingen av den mottagna informationen.

DnD och externa data

Att ladda upp bilder till servern i "dra och släpp" är en vanlig praxis inom denna teknik. Vanligtvis skapar en utvecklare ett filuppladdningsformulär (1) som fungerar på vanligt sätt (2). Besökaren kan normalt välja filer och ladda upp dem.

Men om en besökare drar och släpper till en viss plats i formuläret så kommer filnamnsfältet (filerna) att fyllas i automatiskt.

Det bra beslut. Det är förstås väldigt svårt att erkänna att det inte finns någon mus på datorn. Men det är bättre att utveckla användargränssnittet på vanligt sätt och i DnD-implementeringen.

DnD och interna data

Att ta hand om besökarens intressen är alltid viktigt, men utvecklarens oro har också betydelse. Du kan implementera "dra och släpp" inte bara standardmedel, men också genom att hantera mushändelser på sidelement.

Uppgiften att beräkna taggkoordinatvärden och deras storlekar uppstår ständigt. Manuell beräkning är god praxis, men det interaktiva alternativet är bekvämare. Alla taggar är alltid rektangulära till formen, och genom att övervaka mushändelser på sidorna av element kan du skapa möjligheten att automatiskt flytta element till rätt plats på sidan, eller ändra dem.

Hantera klickhändelsen med musknappen - komma ihåg koordinaterna för klickplatsen, till exempel en av sidorna av elementet. Flytta musen - sidan rör sig i önskad riktning. Släpp musknappen - sidan stannar och dess koordinater ändras. På så sätt kan du ändra elementets position eller storlek.

Det är inte formellt dra och släpp, men effekten är liknande och praktisk. Genom att göra universella hanterare för alla sidelement kan du få ett bra interaktivt resultat, påskynda utvecklingen och förenkla kod.

Visuell och manuell programmering

En mus på en dator och fingrar på en smartphone är helt olika tillvägagångssätt för implementeringen av användargränssnittet (besökare, utvecklare). Det är ett helt naturligt och modernt krav för kompatibilitet över webbläsare.

Allt detta tillsammans komplicerar skapandet av sidor, men genom att tillämpa idén om att dra och släppa i sin standardform, använda dess händelser, kombinera denna idé med vanliga händelser på element, kan du implementera en mekanism där sidskapandet kommer att uppstå visuellt.

Låt oss nu titta på valet av ett eller flera element. Urvalsfakta - utseendet på en snabbmeny, till exempel, målet är att justera den valda (vänster, höger, mitten), eller fördela element vertikalt eller horisontellt med samma steg, eller ändra deras storlek (minimum, max).

Automatisk omräkning av koordinater och dimensioner är att föredra framför manuell. Färre misstag – målet nås snabbare. Dessutom kan du skapa en sida i en webbläsare, spara position och storlek på element. Genom att öppna den här sidan på en smartphone kan du korrigera koordinaterna och dimensionerna och komma ihåg dem för en specifik smartphonemodell eller webbläsarversion.

Så samma sida utan manuell efterlevnad av kompatibilitetskravet för flera webbläsare kommer att ha olika data att visa på olika enheter och i olika webbläsare.

Om du tillåter besökaren att utföra dessa procedurer på egen hand, samt välja de nödvändiga sidelementen bland de som tillhandahålls av utvecklaren, är det möjligt att säkerställa kompatibilitet över webbläsare och den nödvändiga funktionaliteten på sidan, med hänsyn till användarens åsikt.

Där GUI-element implementeras med hjälp av pseudografi) med musen eller pekskärmen.

Metoden implementeras genom att "fånga" (genom att trycka och hålla ned huvudknappen ( först, oftare vänster) musknapp) för ett objekt som visas på datorskärmen, programmässigt tillgängligt för en sådan operation, och flytta det till en annan plats (för att ändra platsen) eller "kasta" det på ett annat element (för att anropa motsvarande åtgärder som tillhandahålls av programmet). När det gäller fönster (som också kan flyttas på liknande sätt) används vanligtvis inte denna term.

De grundläggande åtgärderna och de enklaste exemplen på dra-och-släpp-åtgärder är: flytta ett objekt, flytta ett objekt från panel till panel, även om det är i modern operativsystem dra-och-släpp har använts flitigt och är ett av de viktigaste sätten att interagera med en dator i ett grafiskt användargränssnitt.

Följande gränssnittselement kan vara objekt att flytta: Skrivbordsikoner (ikoner), flytande verktygsfält, programgenvägar i Aktivitetsfältet (som börjar med Win XP), TreeView-element, textsträng, DataGridView-cell., även OLE-element. Objekt kan röra sig både inom ett visst område, inom ett fönster, mellan paneler i ett fönster och mellan olika fönster.

Drahändelsen måste utlösas av någon användaråtgärd. Oftast är denna åtgärd en vänster musknappstryckning på ett element (denna händelse kallas MouseDown), som kan flyttas i dess behållare. Vissa komponenter har sina egna dra-n-släpp-starthändelser - till exempel har TreeView en ItemDrag-händelse.

Wikimedia Foundation. 2010 .

Se vad "Dra-och-släpp" är i andra ordböcker:

dra och släpp- 〈[ dræg ənd drɔ̣p] n.; ; unz.; EDV〉 då klickar du på ett objekt, som är tillgängligt för datorbildschirm (i ett annat fil bzw. och ett annat ställe) förskjuts u. dort wieder losgelassen wird [engl. dra "ziehen" + och "und" + släpp "fallen... ... Universal-Lexikon

Formuläret för att utföra alla åtgärder i grafiska gränssnitt användare, vilket innebär användningen data mus. Översatt från engelska betyder ordagrant: dra och släpp. Åtgärden utförs genom att manövrera på det synliga på skärmen ... ... Ordlista över affärstermer

dra och släpp- (dator) För att flytta en ikon, fil, etc över skärmen med hjälp av en mus och släpp den på en annan plats (draˈ och släppˈ adjektiv) Huvudpost: dra ... Användbar engelsk ordbok

dra och släpp- IT för att flytta något från ett område på en datorskärm till ett annat med hjälp av musen: »Programvaran låter dig dra och släppa element för sidbilder, text, etc. vart du än vill. Huvudpost: dra … Ekonomiska och affärsmässiga villkor

dra och släpp- UK USA verb n.; Gen.: ; Pl.: unz.; EDV〉 då klickar du på ett objekt, som är tillgängligt för datorbildschirm (i ett annat fil bzw. och ett annat ställe) förskjuts u. dort wieder losgelassen wird)