Vad är kärnan i drag och droppteknik. Dra och släpp element (dra och droppe)

Användning av teknik dragning (dra och släpp.) Det ger användaren att flytta olika föremål från en till en annan, till exempel, element i en lista till en annan. För att göra detta, använd två kontroller: mottagare och källa. Mottagaren är det objekt som ett objekt kommer att få ett objekt (rörligt objekt).

Händelser som uppstår i färd med att flytta objekt anges i den ordning de uppstår.

OnstartDrag. (TYTARDRAGEVENT TYPE) - I början av operationen genereras operationen av källobjektet. Parametrarna som sänds till evenemangshanteringen: DragoBject Mottagarobjektet (TDragobuktyp), källobjektkällan (tömt typ).

Ondragover. (TDragoverEvent typ) - Skapar ett mottagarobjekt när objektet rör sig ovanför det. Parametrar som sänds till Event Handler: Sender Objekt (TOGECT-typ), källobjektkälla (typ typ), status status staty (TDragstate Type), X och Y (heltalstyp) - aktuella muspekare koordinater, acceptera (boolean typ) a Tecken på bekräftelse av rörelsesoperationen. Rörelsens tillstånd gör det möjligt att förstå huruvida det rörda objektet i mottagarområdet rör sig i det, lämnade det. De överförda parametrarna gör det möjligt för mottagarens objekt att acceptera eller avvisa källkällan. Accepteringsparametern är inställd på Trye om rörelsen accepteras, annars är falsk.

ondragdrop (TDRAGDOPEVENT typevent) - skapas av mottagarens objekt när det rörliga objektet sänks på det. Händelsehanteraren överförs till de nuvarande koordinaterna för muspekaren, avsändarmottagarenobjektet (TOGECT-typ), källobjektet för rörelsekälla (tobjord typ).

oneDDRAG (typ endDragevent) - skapad när drag och droppe-operationen är klar. Händelsehanteraren av X- och Y-koordinaten för den punkt där avsändarkällan visade sig vara källan och målmottagarens objekt.

För att göra drag och släpp är det tillräckligt att implementera två händelser: ondragdrop och onDragover när egenskapen Dragmode är installerad lika med Dmautomatic. Annars är starten av rörelsesoperationen, Begindrag-metoden, det är nödvändigt att koda programmeraren.

För att säkra materialet, skapa följande applikation. På form av panelkomponent. I Dragmode-egenskapen hos objektinspektören, ställ in DMAUTOMATIC-värdet. Vi markerar objektformuläret och använder objektinspektören skapar följande händelser:

Procedur tform1.FormDragover (avsändare, källa: tgict; x, y: heltal; tillstånd: tdragstate; var acceptera: boolean); Börja om källa \u003d panel1 och acceptera sedan: \u003d sant annat acceptera: \u003d falskt; slutet; Procedur tform1.FormDragdrop (avsändare, källa: tgict; x, y: heltal); Börja panel1.Left: \u003d x; Panel1.Top:\u003d y; slutet;

Nu kör programmet och trycker på musknappen på panelen, kan vi flytta panelobjektet över formuläret.

Resultat: Vi bekanta med tekniken dragning (Dra och släpp) och använde den i praktiken.

Metoder för att arbeta med tekniken för "drag och kasta" bildades i många år. Det är inte förvånande att med en ökning av antalet programmerare som utvecklar plug-ins med öppen källkod (Till exempel, för jquery) är gamla metoder återfödda igen. JavaScript-biblioteket är mycket adaptivt och erbjuder många förbättringar i vår era av webbteknik.

I den här lektionen kommer vi att göra ett skript som kan användas för att skapa dynamiska rektanglar med "droppar och kasta" teknik på din webbplats. Processen styrs av jquery. Sådana skript behåller tiden genom att tillhandahålla färdig funktionalitet! Och biblioteket "dra och kasta" kan användas i andra projekt.

Förbered innehåll

Först och främst kommer vi att förbereda en liten plats för projektet. I projektmappen måste du skapa två katalog med anmärkningsvärda namn. "JS" och "CSS" och tom fil index.html . Koden kommer att vara väldigt enkel att göra en tydlig idé om arbete, och en punkt dök upp för vidareutveckling.

Nedan är koden för vår HTML-fil.. I kapitel huvud. Vi slår på 3 skript. Huvudskriptet JQuery kommer att bokas från Google Code-servern. Vår stil.css styling-fil är också ansluten, som innehåller grundläggande egenskaper för formning extern utsikt Vårt dokument.

Inuti sektionen kropp. Endast två block är placerade divsom innehåller båda rektanglarna. Koden är ganska enkel och förståelig. Inuti varje rektangel placerade rubriker med klasser hanterare och handler2.. Detta är viktigt, eftersom när man drar varje rektangel beter sig på sin egen väg.

Installera CSS.

HTML-kod är mycket enkel. Om huvudmarkeringen är klara för dig då styles CSS. Kommer också inte att representera svårigheter. I grund och botten bestäms fält, strecksatser och färger.

Kropp, HTML (Font-Family: Calibri, Sans-Serif; Bakgrund: # EAF3FB; FONT-STORLEK: 12PX; Höjd: 1000px; Linjehöjd: 18px;) p (höjd: 30px;)

Selektörer kropp, html. Används endast för en demonstrationssida. Och hela innehållet är beläget i två dragande rektanglar.

DV1 (Bredd: 200PX; Bakgrundsfärg: # EFF7FF; BORDER: 1PX Solid # 96C2F1; Position: Absolut; Vänster: 100px; Topp: 100px;) .dv1 h2 (bakgrundsfärg: # b2d3f5; Padding: 5px; Font- Familj: Georgia, "Times New Roman", Times, Serif; Fontstorlek: 1.0EM; Text-transform: Storlek; Font-Vikt: Fet; Färg: # 3A424A; Marginal: 1px; markör: flytta;) .dv1 div (Padding: 5px; marginal-botten: 10px;) .dv2 (bakgrundsfärg: # f7ebfb; kant: 1px solid # a36fde; Bredd: 550px; position: absolut; markör: flytta; vänster: 400px; topp: 230px;) .Dv2 h2 (bakgrundsfärg: # eacfe9; brevutrymme: -0.09, teckensnitt: 1.8EM; typsnitt: fet; padding: 15px; marginal: 1px; färg: # 241f24; markör: flytta;) .dv2 .Content2 (Padding: 5px; Marginal-Bottom: 10px;)

För båda klasserna.dv1 i.dv2 använder vi absolut positionering. Detta är inte nödvändigt och förmodligen är det inte det mesta det bästa sättet Att placera de dragfria rektanglarna. Men för vårt exempel är sådan positionering mening, eftersom varje gång sidrektanglarna är installerade på vissa ställen.

Även teckensnitt och färger skiljer sig åt för rektanglar för att göra det lättare att se skillnaden.

Resten av rubrikerna och innehållet i blocken är nästan identisk. Om du kopierar stilar i ditt projekt, ändra namnen före körning. I vissa fall kommer det att vara mer logiskt att använda ID istället för klasser, till exempel när man använder "dra och kasta" teknikerna för ett visst block.

Vi demonterar JavaScript

Två JavaScript-filer innehåller all den kod du behöver. Vi sänker detaljerna i jobbet med jquery, eftersom det går utöver lektionen. Var uppmärksam på filen jquery.dragndrop.js.

Funktionen bestäms på rad 22 Drar..

$ .fn.Drags \u003d Funktion (OPTS) (VAR PS \u003d $ .Extend (Zindex: 20, Opacity: .7, Handler: NULL, ONMOVE: FUNCTION () (), Ondrop: Funktion () ()), OPTS) ;

Här är den returnerade variabla och initialiseringsdata inställd för Drar.. Denna metod används mycket vid arbete med jquery för att överföra alternativ till andra funktioner. Inuti ställer vi variablerna för alla tillgängliga alternativ för att dra rektanglar.

Nästa del av koden innehåller händelsehanterare för variabel dragdrop.. Båda händelserna drag. och släppa. Samtalsfunktioner med överföring av händelseparametrar i dem. Dessa händelser uppstår när du klickar på musknappen för att dra objektet och släpp sedan det.

Var dragndrop \u003d (dragdata \u003d e.data.dagdata; dragdata.target.css ((vänster: dragdata.left + e.pagex - dragdata.offleft, topp: dragdata.top + e.pagey - dragdata.offtop); Dragdata .Handler.css ((markör: "flytta")) dragdata.target.css ((markör: "flytta")); dragdata.onmove (e);), droppe: funktion (e) (var dragdata \u003d e. data.Dragdata; dragdata.target.css (dragdata.oldcss); //. CSS (("Opacity": "")); dragdata.Handler.css ("markör", dragdata. Oldcss.cursor); dragdata.ondrop (E); $ (). Unbind ("mousemove", dragndrop.Drag) .unbind ("mouseup", dragndrop.drop);))

Våra funktioner manipulerar CSS positionering varje objekt. Om du ändrar den absoluta positioneringen av dina objekt, påverkar det inte koden, eftersom varje JavaScript-funktion ändrar vilken stil som definieras för objektet.

Resten är kontrollerad för hanterare och kosmetiska ändringar från andra stilar. Här kan du lägga till en förändring i transparens, teckensnitt och dess färger, eller lägga till nya stycken.

Dra / släpp funktioner

Den andra fn.js-filen innehåller en enkel kod. Vi väntar på den fullständiga nedladdningen av dokumentet, varefter vi kallar våra funktioner. Två instanser av funktionen bestäms Drar.som förstod tidigare.

Vi har två flyttade block med klasser.dv1 i.dv2. Om du behöver lämna ett rörligt block måste du bara ta bort den andra delen av koden. Att lägga till ett annat flyttat block utförs också helt enkelt. Du behöver bara lägga till ny funktion I den här filen.

Först och främst måste du ställa in alternativ när du ringer en funktion. Var noga med att ställa in hanterarens namn. Med det informerar vi jquery, vilken hanterare används när du trycker på musknappen i ett visst dokumentområde. Handlaren kan vara en klass eller ett ID-attribut.

I vår första funktion finns det två evenemangshanterare onmove. och ondrop.. Båda kallar nya funktioner som sänds till den aktuella händelsen som variabler. Här är manipuleringen av HTML-koden i rektangeln för att uppgradera med varje rörelse. Detta är en underbar effekt för att visa hur det är möjligt att styra processen med hjälp av enkla jquery händelser.

I den andra funktionen använder vi parametrarna Z-index och opacitet. Kan jag lägga till andra CSS-egenskaper? Men det här kräver en omarbetande JavaScript-kod för att kontrollera installationerna. Till exempel kan du sända en annan typsnitt eller mening för höjd och bredd för en rektangel som rör sig - det blir ett mycket intressant trick!

Slutsats

Som ett resultat av ett litet arbete fick vi till vårt förfogande ett underbart gränssnitt med funktionen "droppar och kasta". JQuery ger stora fördelar för utvecklare som längtar efter gamla metoder för att använda gamla metoder.

Som ett resultat fick vi inte bara funktionerna hos evenemangshanterare, men vi kan överföra nya variabler till dragfria block. Detta öppnar nya möjligheter till kreativitet. Demonstrationen till lektionen innehåller bara skissen av vad som kan göras med hjälp av en sådan kod.

Så lära dig JQuery-dokumentationen att använda biblioteksfunktioner.

Där GUI-elementen implementeras med hjälp av en pseudografisk) med musmanipulatorn eller pekskärmen.

Metoden implementeras av "Capture" (genom att trycka på huvudet ( först, oftare än vänster) musknappen) som visas på datorns datorskärm, programvara tillgänglig för en sådan operation och flytta den till en annan plats (för att ändra platsen) eller "kasta" det till ett annat element (för att ringa den lämpliga av programmet, åtgärderna). I förhållande till fönstren (även kapabel att flytta i den här metoden) används denna term vanligtvis inte.

Grundläggande åtgärder och mest enkla exempel Drag-och-släpp-åtgärder är: Flytta ett objekt, flytta objektet in från panelen till panelen, men i modern operativsystem Dra och droppe fick utbredd användning och är ett av de viktigaste sätten att interagera med datorn i det grafiska användargränssnittet.

Objekt för att flytta kan vara följande gränssnittselement: skrivbordsikoner (ikoner), flytande verktygsfält, programgenvägar i aktivitetsfältet (börjar med Win XP), Treeview-element, textsträng, datagridviewcell., Även oleelement. Objekt kan flytta både inom ett visst område, inom ett fönster, mellan panelerna i ett fönster och mellan olika fönster.

Draghändelse måste initieras med alla användaråtgärder. Oftast är den här åtgärden att trycka på den vänstra musknappen på elementet (händelsen kallas Moudown), som kan flyttas i behållaren. Vissa komponenter har egna evenemang Start av drag-n-droppe - till exempel, Treeview har en itemDrag-händelse.

Wikimedia Foundation. 2010.

Titta på vad som är "drag-och-drop" i andra ordböcker:

Dra och släpp. - \u003c[dræg ənd drɔ̣p] n.; ; unz.; EDV\u003e Das Anklicken Eines Objektes, Das Auf Dem Computerbildschirm (i Eine Anderere Datei Bzw. En Eine Annere Stelle) verschoben U. Dort Wieder Losgelassen wird [Engl. Dra "Ziehen" + och "und" + drop "fallen ... Universal-Lexikon

Form av att utföra några åtgärder i grafiska gränssnitt Användare som innebär användning data mus. Översatt från engelska betyder bokstavligen: vända och kasta. Åtgärden utförs genom att använda synlig på skärmen ... ... Business Villkor Dictionary

dra och släpp. - (Computing) För att flytta en ikon, fil, etc över skärmen med en mus och släppa den på ett annat ställe (dra och släpp adjektiv) huvudinmatning: dra ... Användbar engelsk ordbok

dra och släpp. - Det ska flytta något från ett område på en datorskärm till en annan med hjälp av musen: »Programvaran låter dig dra och släppa element för Vart du än vill. Huvudinmatning: Dra ... Finansiella och affärsvillkor

dRA OCH SLÄPP - UK US Verb n.; Gen:; Pl.: UNZ.; EDV\u003e Das Anklicken Eines Objektes, Das Auf Dem Computerbildschirm (i Eine Anderere Datei Bzw. En Eine Annere Stelle) verschoben U. Dort Wieder Losgelassen wird)