Skapa ett enkelt HTML5 "dra och släpp"-gränssnitt. Dra-och-släpp: ett sätt att använda användargränssnittselement 13 dra och släpp-teknik

182

I det här exemplet väljer vi ett div-element och gör det rörligt genom att anropa metoden draggable() på det. Som visas i figuren nedan tar elementet sin vanliga position i det öppnade dokumentet, men efter det kan det flyttas med muspekaren till valfri plats i webbläsarfönstret:

Möjligheten att dra och släppa element är användbar i sig, men den är ännu mer användbar när den används tillsammans med den släppbara interaktionen, som beskrivs härnäst.

Dragbar interaktion uppnås enbart genom användning av specifika HTML-uppmärkningar och CSS-stilar. Detta betyder att den här funktionen kommer att fungera i nästan alla webbläsare, men de element som är utrustade med den kommer inte att kunna fungera med liknande inbyggda dra-och-släpp-verktyg operativsystem.

Dra-och-släpp-operationer som definieras av HTML5-specifikationen implementeras vanligtvis med inbyggda operativsystemmekanismer. Om du använder dra-och-släpp-mekanismen i jQuery UI är det bättre att inaktivera motsvarande HTML5-funktioner för att undvika konflikter. För att göra detta, ställ in det dragbara attributet för dokumentelementet till false.

Konfigurera den dragbara interaktionen

Det finns många anpassningsalternativ för dragbara interaktioner. De viktigaste egenskaperna, som diskuteras i följande avsnitt, visas i tabellen nedan:

Dragbara interaktionsegenskaper egendomsbeskrivning

axel	Begränsar möjligheten att röra sig i vissa riktningar. Standardvärdet är falskt, vilket betyder att det inte finns några begränsningar, men du kan också ange ett värde på "x" (flytta endast längs X-axeln) eller "y" (flytta endast längs Y-axeln)
inneslutning	Begränsar platsen för elementet som flyttas till ett specifikt område på skärmen. Typerna av värden som stöds beskrivs i tabellen nedan, med hjälp av motsvarande exempel. Standardvärdet är falskt, vilket betyder inga begränsningar
dröjsmål	Anger hur länge ett element måste dras innan det flyttas. Standardvärdet är 0, vilket betyder ingen fördröjning
distans	Definierar avståndet som användaren måste dra ett element från dess startposition innan det faktiskt rör sig. Standardvärdet är 1 pixel
rutnät	Tvingar snäppningen av det flyttade elementet till rutnätscellerna. Standardvärdet är false, vilket betyder ingen bindning

Begränsande rörelseriktningar

Det finns flera sätt du kan begränsa ett elements rörelse till vissa riktningar. Det första är att använda axelalternativet, som låter dig begränsa rörelseriktningen till X- eller Y-axeln. Ett exempel på detta visas nedan:

... div.dragElement (font-size: large; border: small solid black; padding:16px; width: 8em; text-align: center; background-color: lightgrey; margin: 4px ) $(function() ( $ (".dragElement").draggable((axel: "x")).filter("#dragV").draggable("alternativ", "axel", "y"); )); Dra vertikalt Dra horisontellt Kör exempel

I det här exemplet definierar vi två div-element, väljer dem med jQuery och anropar metoden draggable(). Som ett argument för denna metod skickar vi ett objekt som initialt begränsar rörelsen av båda div-elementen till riktningen längs X-axeln. Genom att sedan använda metoden jQuery filter() kan vi välja dragV-elementet utan att jQuery söker i hela dokumentet igen och ställ in det i en annan tillåten rörelseriktning - längs Y-axeln. Således får vi ett dokument där ett div-element endast kan dras i vertikal riktning och det andra - endast i horisontell riktning. Resultatet visas i figuren:

Begränsning av det tillåtna området för elementrörelser

Du kan också begränsa området på skärmen där du kan dra ett objekt. För att göra detta, använd inneslutningsalternativet. Värdeformaten som kan anges i det här alternativet beskrivs i tabellen nedan:

Ett exempel på användning av inneslutningsalternativet ges nedan:

... div.dragElement (font-size: large; border: small solid black; padding:16px; width: 8em; text-align: center; background-color: lightgray; margin: 4px ) #container ( kantlinje: medium dubbel svart; bredd: 700px; höjd: 450px) $(function() ( $(".dragElement").draggable((inneslutning: "förälder" )).filter("#dragH").draggable("option", " axel", "x"); )); Dra horisontellt Dra inuti förälder Kör exempel

I det här exemplet är båda elementen begränsade i sin förmåga att röra sig så att de bara kan dras inom sitt överordnade element, som är en div med fast storlek. En av diverna som flyter har den ytterligare begränsningen att den flyter med hjälp av axelalternativet, eftersom den bara kan röra sig horisontellt inom sin överordnade. Resultatet illustreras i figuren:

Begränsar möjligheten att flytta ett element till rutnätsceller

Gridalternativet låter dig ställa in bindningen av det flyttade elementet till rutnätsceller. Det här alternativet tar som ett värde en matris med två element som anger bredden och höjden på rutnätscellerna i pixlar. Ett exempel på hur du använder rutnätsalternativet ges nedan:

... #draggable (font-size: x-large; border: small solid black; width: 5em; text-align: center; padding:10px) $(function() ( $("#draggable").draggable( ( rutnät: )); )); Drag me Run exempel

Det här exemplet anger ett rutnät med celler 100 pixlar breda och 50 pixlar höga. När du drar ett element "hoppar" det från en (osynlig) cell till en annan. Snäppeffekten är ett bra exempel på hur interaktionsfunktionalitet kan användas, men det är svårt att förmedla med skärmdumpar.

Du kan skapa en snapeffekt för endast en riktning genom att ställa in den fria rörelseaxeln till 1. Om du till exempel ställer in rutnätsalternativet till , kommer elementet att fästa till 100 pixlar breda rutnätsceller när det flyttas horisontellt, men kommer att röra sig fritt vertikalt.

Flyttfördröjning

Det finns två alternativ som låter dig fördröja dragningen av ett rörligt element. Fördröjningsalternativet låter dig ange hur lång tid, i millisekunder, som användaren måste dra muspekaren innan elementet faktiskt flyttas. En annan typ av fördröjning tillhandahålls av avståndsalternativet, som anger avståndet i pixlar som användaren måste dra muspekaren innan den följs av ett element.

Ett exempel på hur du använder båda inställningarna ges nedan:

... #tid, #avstånd (font-size: large; kant: tunn fast svart; stoppning: 10px; bredd: 120px; text-align: center; bakgrundsfärg: ljusgrå; marginal: 4px; ) $(function( ) ( $("#time").draggable(( delay: 1000 )) $("#distance").draggable(( avstånd: 150 )) )); Block med tidsfördröjning Block med minsta distans Löpexempel

I det här exemplet finns det två rörliga element, varav det ena är fördröjt med fördröjningsalternativet och det andra fördröjs med avståndsalternativet.

I fallet med en fördröjning, specificerad av fördröjningsalternativet, måste användaren dra en viss tid innan den faktiskt flyttar elementet. I det här exemplet är längden på denna period 1000 ms. Det är inte nödvändigt att flytta musen just nu, men under hela fördröjningsperioden måste musknappen förbli nedtryckt, varefter elementet kan flyttas genom att flytta musen. Efter att fördröjningstiden har löpt ut kommer elementet som flyttas att snäppa till muspekarens plats, med förbehåll för de begränsningar som ställs av rutnätet, regionen och axelalternativen som diskuterats tidigare.

Avståndsalternativet har en liknande effekt, men i det här fallet måste användaren dra muspekaren minst ett visst antal pixlar i valfri riktning från elementets startplats. Elementet som flyttas kommer då att hoppa till den aktuella pekarens plats.

Om du tillämpar båda inställningarna på samma element kommer det flyttade elementet inte att flyttas förrän båda fördröjningskriterierna är uppfyllda, d.v.s. tills ett försök att dra ett element varar under en viss tid och tills muspekaren flyttar ett visst antal pixlar.

Använda dragbara interaktionsmetoder

Alla metoder som definieras för dragbar interaktion är en del av uppsättningen basmetoder som du redan har sett när du tittar på widgets. Det finns inga metoder som är specifika för Draggable-interaktion, så vi kommer inte att täcka dem i detalj. Listan över tillgängliga metoder finns i tabellen nedan:

Använda dragbara interaktionshändelser

Interaktion Draggable stöder en enkel uppsättning händelser som meddelar dig när ett element dras. Dessa händelser beskrivs i tabellen nedan:

Precis som med widgethändelser kan dessa händelser också besvaras. Ett exempel på hantering av start- och stopphändelser ges nedan:

... #draggable (font-size: x-large; kant: tunn fast svart; bredd: 190px; text-align: center; padding:10px) $(function() ( $("#draggable").draggable( ( start: function() ( $("#draggable").text("Dra mig..."), stop: function() ( $("#draggable").text("Drag me") ) )) ;)); Drag me Run exempel

Det här exemplet använder start- och stopphändelser för att ändra textinnehållet i ett element när det dras. Denna fördel beror på det faktum att Draggables interaktion implementeras helt med HTML och CSS: du kan använda jQuery för att ändra tillståndet för ett dragbart element även när det rör sig över skärmen.

Använder släppbar interaktion

Att dra ett element enbart kan vara tillräckligt i vissa situationer, men det är mest användbart när det används tillsammans med den släppbara interaktionen.

Element som den släppbara interaktionen har tillämpats på (mottagande element) får förmågan att acceptera rörliga element som skapats med hjälp av den dragbara interaktionen.

Mottagande element skapas med metoden droppable(), men för att få användbar funktionalitet måste du skapa händelsehanterare bland de som definieras för denna typ av interaktion. Tillgängliga evenemang visas i tabellen nedan:

Släppbara interaktionshändelser Händelsebeskrivning

skapa	Uppstår när en släppbar interaktion tillämpas på ett element
Aktivera	Uppstår när användaren börjar dra elementet som flyttas
avaktivera	Uppstår när användaren slutar dra elementet som flyttas
över	Uppstår när användaren drar ett flytbart element över ett mottagande element (förutsatt att musknappen inte har släppts ännu)
ut	Uppstår när användaren drar elementet som flyttas utanför det mottagande elementet
släppa	Uppstår när användaren lämnar elementet som flyttas på det mottagande elementet

Ett exempel på att skapa ett enkelt mottagande element för vilket en enda släpphändelsehanterare är definierad ges nedan:

... #dragbar, #släppbar (font-size: large; kant: tunn fast svart; stoppning: 10px; bredd: 100px; text-align: center; bakgrundsfärg: ljusgrå; marginal: 4px;) #dropable (stoppning) : 20px; position: absolut; höger: 5px;) $(function() ( $("#draggable").draggable(); $("#doppable").dropable(( drop: function() ( $(" #draggable").text("Vänster") ) )); )); Lämna mig här Dra mig Kör exempel

Det här exemplet lägger till ett div-element i dokumentet vars textinnehåll representeras av strängen "Lämna här." Vi väljer det här elementet med jQuery och anropar metoden droppable() och skickar det ett inställningsobjekt som definierar en hanterare för drop-händelsen. Svaret på denna händelse är att ändra texten i elementet som flyttas med metoden text().

Dra-och-släpp-interaktionen som skapats i det här exemplet är enkel, men den ger en användbar kontext för att förklara hur de Drag-och-släpp-interaktioner fungerar tillsammans. De olika stegen i processen att dra element illustreras i figuren:

Det hela ser väldigt enkelt ut. Vi drar elementet som flyttas tills det är ovanför det mottagande elementet och släpper det. Elementet som släpps förblir där det lämnades, och dess textinnehåll ändras som svar på släpphändelsen. Följande avsnitt visar hur du använder andra släppbara interaktionshändelser för att förbättra användarupplevelsen.

Belysning av målmottagande objekt

Med hjälp av aktiverings- och avaktiveringshändelserna kan du markera målmottagningsobjektet när användaren börjar dra ett element. I många situationer är denna idé mycket fruktbar eftersom den ger användaren tillförlitlig vägledning om vilka element som ingår i dra-och-släpp-modellen. Ett motsvarande exempel ges nedan:

... $(function() ( $("#draggable").draggable(); $("#doppable").droppable(( drop: function() ( $("#draggable").text("Vänster ") ), aktivera: function() ( $("#dropable").css(( kantlinje: "medium dubbelgrön", bakgrundsfärg: "lightGreen" )); ), deaktivera: function() ( $("#doppable ").css("kant", "").css("bakgrundsfärg", ""); ) )); )); ...Kör exempel

Så snart användaren börjar dra ett element, aktiveras händelsen som är associerad med vårt mottagande element, och hanterarfunktionen använder metoden css() för att ändra gräns- och bakgrundsfärgens CSS-egenskaper för det elementet. Som ett resultat markeras det målmottagande elementet, vilket indikerar för användaren att det finns en koppling mellan det och elementet som flyttas.

Deaktiveringshändelsen används för att ta bort CSS-egenskapsvärden från det mottagande elementet och återställa det till sitt ursprungliga tillstånd så snart användaren släpper musknappen. (Denna händelse inträffar när dragningen av ett element upphör, oavsett om elementet som dras lämnas kvar på det mottagande elementet eller inte.) Denna process illustreras i figuren:

Hantera överlappande element

Dra-och-släpp-tekniken kan förbättras genom att lägga till över- och uthändningshantering. Överhändelsen inträffar när 50 % av elementet som flyttas är över någon del av det mottagande elementet. Uthändelsen inträffar när tidigare överlappande element inte längre överlappar varandra. Ett exempel på svaret på dessa händelser ges nedan:

$(function() ( $("#draggable").draggable(); $("#doppable").dropable(( drop: function() ( $("#draggable").text("Left") ) , aktivera: function() ( $("#dropable").css(( kantlinje: "medium dubbelgrön", bakgrundsfärg: "lightGreen" )); ), deaktivera: function() ( $("#doppable"). css("border", "").css("bakgrundsfärg", ""); ), över: function() ( $("#doppable").css(( kantlinje: "medium dubbel röd", bakgrundsfärg : "röd" )); ), ut: function() ( $("#doppable").css("kant", "").css("bakgrundsfärg", ""); ) )); ) ); Kör exempel

Samma hanterarfunktioner används här som i föregående exempel, men i det här fallet är de associerade med över- och uthändelserna. När det mottagande elementet överlappar minst 50 % av elementet som flyttas, är det inneslutet i en ram och dess bakgrundsfärg ändras, som visas i figuren:

Denna gräns på 50 % kallas överlappströskeln (tolerans), vars värde kan ställas in när du skapar det mottagande elementet, vilket kommer att visas senare.

Konfigurera släppbara interaktioner

Den släppbara interaktionen har ett antal egenskaper som du kan ändra för att anpassa dess beteende. Dessa egenskaper listas i tabellen nedan:

Släppbara interaktionsegenskaper egendomsbeskrivning

Inaktiverad	Om det här alternativet är sant, är den släppbara interaktionsfunktionen initialt inaktiverad. Standardvärdet är falskt
acceptera	Begränsar uppsättningen av rörliga element som det mottagande elementet kommer att svara på. Standardvärdet är *, vilket matchar alla element
activeClass	Definierar en klass som kommer att tilldelas som svar på aktiveringshändelsen och tas bort som svar på avaktiveringshändelsen
hoverClass	Definierar en klass som kommer att tilldelas som svar på en överhändelse och tas bort som svar på en uthändelse
tolerans	Definierar den lägsta graden av överlappning vid vilken en överhändelse inträffar

Begränsning av tillåtna element som ska flyttas

Du kan begränsa uppsättningen av släppbara element som kommer att accepteras av ett element med släppbar interoperabilitetsfunktion genom att använda alternativet acceptera. Värdet för alternativet acceptera bör ställas in på en väljare. Som ett resultat kommer släppbara interaktionshändelser endast att inträffa om elementet som flyttas matchar den angivna väljaren. Ett motsvarande exempel ges nedan:

... .dragbar, #dropable (font-size: large; border: thin solid black; stoppning: 10px; bredd: 100px; text-align: center; bakgrundsfärg: ljusgrå; margin: 4px;) #dropable (stoppning) : 20px; position: absolut; höger: 5px;) $(function() ( $(".draggable").draggable(); $("#doppable").dropable(( drop: function(event, ui) ( ui.draggable.text("Vänster") ), activate: function() ( $("#doppable").css(( kantlinje: "medium dubbelgrön", bakgrundsfärg: "lightGreen" )); ), deaktivera: funktion () ( $("#droppable").css("kant", "").css("bakgrundsfärg", ""); ), acceptera: "#drag1" )); )); Lämna här Element 1 Element 2 Körexempel

I det här exemplet finns det två dragbara element med ID:n drag1 och drag2. När vi skapar ett mottagande element använder vi alternativet acceptera, med vilket vi indikerar att endast drag1-elementet kommer att vara ett acceptabelt element som ska flyttas.

När du drar elementet drag1 kommer du att se samma effekt som i de tidigare exemplen. Vid lämpliga tidpunkter kommer aktiverings-, avaktiverings-, över- och uthändelserna att aktiveras för det mottagande elementet. Samtidigt, om du drar ett drag2-element som inte matchar väljaren som anges i acceptparametern, kommer dessa händelser inte att aktiveras. Detta element kan flyttas fritt, men det kommer inte att uppfattas av det mottagande elementet.

Lägg märke till förändringen i hur vi väljer ett acceptabelt flytbart element för att anropa text()-metoden. När det bara fanns ett rörligt element i dokumentet räckte id-attributet för detta:

Släpp: function() ( $("#draggable").text("Left") ),

I det här exemplet finns det två element som ska flyttas, och val av id-attribut ger inte önskat resultat, eftersom texten i detta fall alltid kommer att ändras i samma flytande element, oavsett vilket som är acceptabelt för det mottagande elementet.

Lösningen är att använda UI-objektet, som jQuery UI tillhandahåller som ett extra argument till varje händelsehanterare. Den dragbara egenskapen för ett ui-objekt returnerar ett jQuery-objekt som innehåller elementet som användaren drar eller försöker släppa på målelementet, vilket gör att det önskade elementet kan väljas så här:

Släpp: function(event, ui) ( ui.draggable.text("Left") ),

Ändra överlappningströskeln

Som standard inträffar överhändelsen endast när minst 50 % av elementet som flyttas överlappar det mottagande elementet. Mängden av denna tröskelöverlappning kan ändras med hjälp av toleransalternativet, som kan ta de värden som visas i tabellen nedan:

De två värdena jag använder oftast är passform och beröring eftersom de är mest meningsfulla för användarna. Jag använder passform när det släpade elementet behöver förbli i området för det mottagande elementet det flyttades till, och pekar när det släpade elementet behöver återgå till sin ursprungliga position (ett exempel kommer att ges nedan). Ett exempel på användning av passnings- och beröringsparametrarna ges nedan:

Klonvärdet talar om för jQuery UI att skapa en kopia av elementet som flyttas, tillsammans med allt dess innehåll, och använda det resulterande resultatet som ett hjälpelement. Resultatet visas i figuren:

Hjälpelementet tas bort när användaren släpper musknappen över elementet som flyttas, vilket lämnar elementet som flyttas och det mottagande elementet i sina ursprungliga positioner.

Som visas i figuren förblir det ursprungliga elementet som flyttas på plats och endast hjälpelementet rör sig runt skärmen efter muspekaren. Om storleken på det flyttade elementet är stort, som i vårt exempel, täcker det resten av dokumentelementen, så att det blir svårt för användaren att ens spåra positionen för det mottagande elementet. Det här problemet kan lösas genom att tillhandahålla funktionen som värdet för hjälpalternativet, som visas i exemplet nedan:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").dropable((activeClass: "active", hoverClass: "hover" )); )); ...Kör exempel

När användaren börjar dra ett element anropar jQuery UI funktionen som specificeras av helper-parametern och använder det returnerade elementet som objektet som ska dras. I det här fallet använder jag jQuery för att skapa img-elementet. Resultatet visas i figuren:

En liten bild fungerar som en proxy för elementet som flyttas, vilket gör det mycket lättare att hålla reda på andra element i dokumentet.

Ui-objektet som jQuery UI skickar till släppbara interaktionshändelser innehåller en hjälpegenskap, och den här egenskapen kan användas för att manipulera hjälparen när den dras. Ett exempel på hur den här egenskapen används i samband med över- och sluthändelserna ges nedan:

... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").doppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , ut: function(event, ui) ( ui.helper.css("border", "") ) )); )); ...

Här används över- och uthändelserna och egenskapen ui.helper för att visa en ram runt hjälparelementet när det överlappar det mottagande elementet. Resultatet visas i figuren:

Fäst till elementets kanter

Med hjälp av snap-alternativet kan du säkerställa att det flyttade elementet "attraheras" till kanterna på elementen bredvid som det passerar. Detta alternativ accepterar en väljare som ett värde. Elementet som flyttas kommer att snäppa till kanterna på alla element som matchar den angivna väljaren. Ett exempel på användning av snap-alternativet ges nedan:

Kör jQuery UI-exempel #snapper, .draggable, .dropable (font-size: large; border: medium solid black; stoppning: 4px; width: 150px; text-align: center; bakgrundsfärg: ljusgrå; margin-bottom: 10px ;).droppbar (marginal-höger: 5px; höjd: 50px; bredd: 120px) #dropContainer (position: absolut; höger: 5px;) div span (position: relativ; topp: 25%) .dropable.active (kant: medium fast grön) .doppable.hover (bakgrundsfärg: ljusgrön) #snapper (position: absolut; vänster: 35%; kant: medium fast svart; bredd: 180px; höjd: 50px) $(function() ( $(" div.draggable").draggable(( snap: "#snapper, .doppable", snapMode: "both", snapTolerance: 50 )); $("#basket").dropable((activeClass: "active", hoverClass: "hovra" )); )); Varukorg Snap here Dra mig

När ett rörligt element närmar sig ett av de lämpliga elementen, "attraheras" det så att säga till det på ett sådant sätt att deras intilliggande kanter berör. För en sådan bindning kan du välja vilket element som helst, inte bara det mottagande. I det här exemplet lade jag till ett div-element och ställde in snap-alternativet till ett värde som väljer det elementet såväl som det mottagande elementet i dokumentet.

Det finns ett par hjälpalternativ som låter dig anpassa förankringsbeteendet för element mer exakt. En av dem är snapMode-alternativet. Med dess hjälp kan du specificera typen av bindning. Följande värden är tillåtna: inre(snäpp till elementens inre kanter), yttre(snäpp till ytterkanterna av element) och både(snäpp till alla kanter; standard).

Alternativet snapTolerance låter dig specificera hur långt det flytande elementet måste närma sig kanten på målelementet innan snappning inträffar. Standardvärdet är 20, vilket betyder 20 pixlar. Exemplet använder ett värde på 50, vilket motsvarar ett snäpp på ett större avstånd. Det är mycket viktigt att välja rätt värde för detta alternativ. Om snapTolerance-värdet är för lågt kanske användaren inte märker snapping-effekten, och om det är för högt kommer elementet som flyttas att börja göra oväntade hopp och snappa till avlägsna element.

Dra och släpp-tekniker har utvecklats under många år. Det är ingen överraskning att med det ökande antalet programmerare som utvecklar plugins med öppen källkod källkod(till exempel för jQuery) återupplivas gamla metoder igen. JavaScript-biblioteket är mycket lyhört och erbjuder många förbättringar i denna tid av webbteknologi.

I den här handledningen kommer vi att göra ett skript som du kan använda för att skapa dynamiska dra och släpp-rektanglar på din webbplats. Processen hanteras av jQuery. Sådana skript sparar tid genom att tillhandahålla färdiga funktioner! Och dra-och-släpp-biblioteket kan användas i andra projekt.

Förbereder innehåll

Först och främst, låt oss förbereda en liten webbplats för projektet. I projektmappen måste du skapa två kataloger med de anmärkningsvärda namnen "js" och "css" och tom fil index.html. Koden kommer att vara mycket enkel, så att det finns en tydlig uppfattning om arbetet, och det finns en poäng för vidareutveckling.

Nedan finns koden för vår HTML-fil. I kapitel huvud vi inkluderar 3 skript. Det huvudsakliga jQuery-skriptet kommer att laddas från Google Code-servern. vår stilfil style.css ingår också, som innehåller huvudegenskaperna för formning utseende vårt dokument.

Dra mig Ja, ja. Precis jag. Du kan dra mig också ( zIndex: 200, opacitet: .9 )

P.S.: du kan lämna mig var som helst!

Invändigt avsnitt kropp endast två block är placerade div, som innehåller båda rektanglarna. Koden är ganska enkel och begriplig. Inuti varje rektangel finns rubriker med klasserna hanterare och hanterare2. Detta är viktigt eftersom varje rektangel beter sig annorlunda när du drar.

Installerar CSS

HTML-koden är väldigt enkel. Om du förstår den grundläggande uppmärkningen, då CSS-stilar kommer inte heller att innebära några svårigheter. Det är främst marginaler, stoppningar och färger som bestäms.

Body,html ( font-family:Calibri, sans-serif; background:#eaf3fb; font-size:12px; height:1000px; line-height:18px; ) p ( höjd:30px; )

Väljare body,html används endast för demosidan. Och allt innehåll är placerat i två dragbara rektanglar.

Dv1 ( width:200px; background-color:#eff7ff; border:1px solid #96c2f1; position:absolute; left:100px; top:100px; ) .dv1 h2 (bakgrundsfärg:#b2d3f5; padding:5px; font- familj:Georgia, "Times New Roman", Times, serif; font-size:1.0em; text-transform:versaler; font-weight:bold; color:#3a424a; margin:1px; cursor:move; ) .dv1 div ( padding:5px; margin-bottom:10px; ) .dv2 ( bakgrundsfärg:#f6ebfb; border:1px solid #a36fde; width:550px; position:absolute; cursor:move; left:400px; top:230px; ) .dv2 h2 ( background-color:#eacfe9; letter-spacing:-0.09em; font-size:1.8em; font-weight: bold; padding:15px; margin:1px; color:#241f24; cursor:move; ) .dv2 .content2 ( padding:5px; margin-bottom:10px; )

För både klasserna .dv1 och .dv2 använder vi absolut positionering. Detta är inte nödvändigt och förmodligen inte det mest Det bästa sättet för att placera dragbara rektanglar. Men för vårt exempel är denna positionering vettig, eftersom varje gång sidan uppdateras installeras rektanglarna på vissa ställen.

Även typsnitt och färger är olika för rektanglarna för att göra det lättare att se skillnaden.

I övrigt är rubrikerna och innehållet i blocken nästan identiska. Om du ska kopiera stilar till ditt projekt, ändra namnen innan du börjar. I vissa fall är det mer meningsfullt att använda ID:n istället för klasser, till exempel när man använder dra-och-släpp-tekniken för ett specifikt block.

Parsar JavaScript

Två JavaScript-filer innehåller all kod som behövs för att det ska fungera. Vi kommer att utelämna detaljerna för att arbeta med jQuery, eftersom detta ligger utanför lektionens omfattning. Låt oss vara uppmärksamma på filen jquery.dragndrop.js.

Rad 22 definierar dragfunktionen.

$.fn.Drags = function(opts) ( var ps = $.extend(( zIndex: 20, opacitet: .7, hanterare: null, onMove: function() ( ), onDrop: function() ( ) ), opts );

Detta ställer in returvariabeln och initialiseringsdata för Drag. Denna metod används mycket ofta när man arbetar med jQuery för att skicka alternativ till andra funktioner. Internt sätter vi variabler för alla tillgängliga val för dragbara rektanglar.

Nästa kodstycke inkluderar händelsehanterare för variabeln dragndrop. Båda händelserna drag Och släppa anropsfunktioner som skickar händelseparametrar till dem. Dessa händelser inträffar när du trycker på musknappen för att dra ett objekt och sedan släpper det.

Var dragndrop = ( drag: function(e) ( var dragData = e.data.dragData; dragData.target.css(( vänster: dragData.left + e.pageX - dragData.offLeft, top: dragData.top + e.pageY - dragData.offTop )); dragData.handler.css((markör: "move" )); dragData.target.css ((markör: "move" )); dragData.onMove(e); ), drop: function( e) ( var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css(( "opacity": "" )); dragData.handler.css("cursor", dragData. oldCss.cursor); dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("mouseup", dragndrop.drop); ) )

Våra funktioner manipulerar CSS-positioneringen av varje objekt. Att ändra den absoluta placeringen av dina objekt kommer inte att påverka hur din kod fungerar, eftersom varje JavaScript-funktion ändrar vilken stil som än är definierad för objektet.

Resten av koden kontrollerar hanteraren och gör kosmetiska ändringar i andra stilar. Här kan du lägga till ändringar av transparens, teckensnitt och teckensnittsfärg, eller lägga till nya stycken.

Dra/släpp funktioner

Den andra fn.js-filen innehåller mycket enkel kod. Vi väntar tills dokumentet är helt laddat, varefter vi anropar våra funktioner. Två instanser av funktionen är definierade Drag, som diskuterades tidigare.

Vi har två flyttbara block med klasserna .dv1 och .dv2. Om du behöver lämna ett flyttbart block, behöver du bara ta bort den andra delen av koden. Det är också enkelt att lägga till ytterligare ett rörligt block. Du behöver bara lägga till ny funktion i den här filen.

Det första steget är att ställa in alternativen när funktionen anropas. Se till att ange hanterarens namn. Med den talar vi om för jQuery vilken hanterare som ska användas när musknappen trycks ned i ett visst område av dokumentet. Hanterarens namn kan vara en klass eller ett ID-attribut.

Vår första funktion har två händelsehanterare onMove och onDrop. Båda anropar nya funktioner som skickas till den aktuella händelsen som variabler. Det är här HTML-koden i rektangeln manipuleras för att uppdateras med varje rörelse. Detta är en fantastisk effekt för att demonstrera hur du kan styra en process med enkla jQuery-händelser.

I den andra funktionen använder vi z-index och opacitetsparametrar. Kan du lägga till andra CSS-egenskaper? men detta kräver omarbetning av JavaScript-koden så att inställningarna kontrolleras. Till exempel kan du skicka en annan typsnittsstil eller värden för höjden och bredden på en rörlig rektangel - ett mycket intressant trick!

Slutsats

Med lite arbete har vi nu ett fantastiskt dra-och-släpp-gränssnitt till vårt förfogande. jQuery ger enorma fördelar för utvecklare som är ivriga att använda gamla metoder i sina projekt.

Som ett resultat har vi inte bara funktioner för händelsehanterare, utan vi kan också skicka nya variabler till dragbara block. Detta öppnar nya möjligheter för kreativitet. Demonstrationen för lektionen innehåller endast en skiss av vad som kan göras med sådan kod.

Så kolla in jQuery-dokumentationen för att använda biblioteksfunktionerna.

Det är lättare att ta något och lägga ifrån sig det än att skriva vad som ska tas och var man ska lägga det. Naturligtvis, utan en mus eller liknande enhet, kan du inte välja någonting 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 långt ifrån bara nätbutiker, elektroniska bibliotek, sökmotorer eller Informationssystem, och även den tillämpade sfären. Idén är mycket användbar i utvecklingen av webbplatser och deras element, skapade och underhållna interaktivt, utan medverkan av en programmerare.

Beskrivning av idén

Välj, flytta och placera – idén är naturlig och bekväm. Det är helt enkelt förvånande att den inte föddes när musen blev ett oumbärligt datortillbehör.

Det mest uppenbara exemplet är att välja en produkt i en webbutik. Att ta den önskade produkten med musen och dra den i kundvagnen är enkelt, naturligt och bekvämt. Ladda upp filer: Att ta ett dokument utanför webbläsarfönstret och placera det på ett sidelement, och därigenom utlösa att dokumentet överförs till servern, är också en praktisk idé.

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

HTML och CSS är utmärkta språk för att beskriva taggar och styla dem, men när en utvecklare har förmågan att interaktivt 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: valt, överfört och släppt – enkelt och naturligt.

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

I det här exemplet valdes flera filer på skrivbordet med musen (vänster figur). Vid valet trycktes vänster musknapp och den valda "gick" till korgen. Webbläsaren själv visade hur detta händer, skrev en ledtråd "kopiering" och skapade konturer av de flyttade filerna runt den.

När musen var över korgen släppte besökaren vänster musknapp, "dra och släpp"-händelsen ägde rum och på sajtsidan (nedre bilden) kunde JavaScript-koden ta emot och bearbeta alla filer som besökaren angav till sidan (webbplatsen).

Implementeringsbeskrivning

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

Här representeras användargränssnittet av två taggar: scPlaceFile (det här är själva korgen där du måste 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 en sida laddas i webbläsaren tilldelas "ondrop"-händelsehanteraren till korgen - put, andra händelser blockeras och används inte.

Sidan fungerar som vanligt, men så fort besökaren väljer en fil (filer) och drar dem till kundvagnsbilden, det vill säga till scPlaceFile-taggen, utlöses bearbetning av händelsen "filer har anlänt".

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 mottagna data bestäms av utvecklaren, i det här fallet genereras helt enkelt en lista över mottagna filer.

Efter bearbetning blockeras händelsen 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 genom att dra och släppa är en vanlig praxis när man använder denna teknik. Vanligtvis skapar utvecklaren ett filuppladdningsformulär (1) som fungerar som vanligt (2). Besökaren kan välja filer och ladda ner dem som vanligt.

Men om en besökare drar och släpper en specifik plats i formuläret kommer filnamnsfältet att fyllas i automatiskt.

Detta 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 i den vanliga versionen 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 bearbeta mushändelser på sidelement.

Uppgiften att beräkna taggkoordinatvärden och deras storlekar uppstår ständigt. Manuell beräkning är en bra praxis, men det interaktiva alternativet är bekvämare. Alla taggar har alltid en rektangulär form och genom att spåra "mus"-händelser på sidorna av element kan du skapa möjligheten att automatiskt flytta element till önskad plats på sidan, eller ändra dem.

Hantera musklickshändelsen - 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.

Formellt är detta inte "dra och släpp", men effekten är liknande och praktisk. Genom att göra universella hanterare för vilket sidelement som helst kan du få ett bra interaktivt resultat, påskynda utvecklingen och förenkla koden.

Visuell och manuell programmering

Mus på datorn och fingrar på smartphonen – absolut olika tillvägagångssätt till implementeringen av användargränssnittet (besökare, utvecklare). Kravet på kompatibilitet över webbläsare är ganska naturligt och modernt.

Allt detta tillsammans gör skapandet av sidor svårare, men genom att tillämpa idén om "dra och släpp" i sin standardform, använda dess händelser, kombinera denna idé med vanliga händelser på element, är det möjligt att implementera en mekanism i vilken sida som skapas visuellt.

Låt oss nu titta på att välja ett eller flera element. Faktumet med val är utseendet på en snabbmeny, till exempel är målet att justera de markerade (vänster, höger, mitten), eller distribuera element vertikalt eller horisontellt med samma steg, eller ändra deras storlekar (minimum, max) .

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

Så samma sida utan att manuellt uppfylla kravet för flera webbläsare kommer att ha olika data som visas på olika enheter och i olika webbläsare.

Genom att tillåta besökaren att utföra dessa procedurer självständigt, och även att välja de nödvändiga sidelementen från 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.

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 i en lista till en annan. För att göra detta måste du använda två kontroller: diskbänk och källa. Mottagaren är det objekt som kommer att ta emot källobjektet (objektet som flyttas).

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

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

OnDragOver(typ TDragOverEvent) - skapar ett mottagarobjekt när ett släpat objekt är över det. Parametrar som skickas till händelsehanteraren: mottagarobjekt Avsändare (typ TObject), källobjekt Källa (typ TObject), rörelsetillstånd State (typ TDragState), X och Y (typ heltal) - nuvarande koordinater för muspekaren, Acceptera ( typ boolean ) tecken på bekräftelse av flyttoperationen. Rörelsetillståndet gör det tydligt om föremålet som flyttas befinner sig i mottagarområdet, rör sig i det eller har lämnat det. De angivna parametrarna gör att målobjektet kan acceptera eller avvisa källobjektet. Acceptera parametern är inställd på Trye om flyttoperationen accepteras, annars är den satt till False.

onDragDrop (typ TDragDropEvent) - genereras av mottagarobjektet när det dragna objektet släpps på det. Händelsehanteraren skickas de aktuella koordinaterna för muspekaren, avsändarens mottagarobjekt (TObject-typ) och det ursprungliga rörelseobjektet Source (TObject-typ).

onEndDrag (EndDragEvent-typ) - Ökas när en dragoperation slutförs. X- och Y-koordinaterna för den punkt där källavsändarobjektet och mottagarmålobjektet 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 dragoperationen, BeginDrag-metoden, kodas av programmeraren.

För att konsolidera materialet kommer vi att skapa följande applikation. Placera panelkomponenten på formuläret. Ställ in egenskapen DragMode för Object Inspector till dmAutomatic. Låt oss välja formulärobjektet och använda objektgranskaren 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); börja Panel1.Left:= X; Panel1.Top:= Y; slutet;

Nu genom att starta programmet och klicka på musknappen ovanför panelen kan vi flytta panelobjektet genom hela formuläret.

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