Share
På et tidspunkt må du kanskje opprette et trekkbart element i webapplikasjonen din. Dette er flott funksjonalitet, men du vil kanskje eller finner at du trenger elementet til å bli på plass etter å ha blitt dratt rundt. I denne opplæringen vil jeg vise deg hvordan du enkelt kan dra et element og få det til å holde fast, selv etter en sideopplasting, ved å ta tak i og lagre sine X- og Y-koordinater.
Så du har et element i webapplikasjonen din. Du kan dra den rundt, sett den her og sett den der. Men når siden lastes på nytt på noen måte, returnerer elementet til standardposisjon. Mens du vil at elementet skal kunne trekkes, vil du ikke at det skal bevege seg etter at det er trukket. La oss se på en enkel løsning for å gi oss denne muligheten.
For denne opplæringen vil vi trenge jQuery-biblioteket, jQuery-brukergrensesnittet og jQuery-JSON-pluginet av Brantley Harris. Vi vil også bruke noen PHP og en MySQL database for å analysere og lagre våre data. Hvis din nye til jQuery, ingen bekymringer. jQuery er et svært utvidbart, raskt og lett JavaScript-bibliotek som er både morsomt og enkelt å bruke. Biblioteket har veldig pent strukturert dokumentasjon, og et stort samfunn. Dette er min første opplæring på jQuery og JavaScript, så vær så snill å bære med meg. Jeg håper å forklare alt så godt jeg kan, og hvis du har noen spørsmål, vær så snill å spørre.
Jeg ønsket å starte med HTML og styling for denne opplæringen siden effekten gjelder for HTML-elementer, det bidrar til å visualisere hva vi skal gjøre, rett utenfor flaggermuset. Først CSS:
html, kropp bakgrunn: # 151515; margin: 0 0 0 0; polstring: 0 0 0 0; #glassbox bakgrunn: # 333; grense: 1px solid # 000; høyde: 400 piksler; margin: 30px auto auto auto; stilling: i forhold; bredde: 960 x; -moz-grense-radius: 10px; -webkit-grense-radius: 10px; #element bakgrunn: # 666; border: 1px # 000 solid; Markøren: flytter; høyde: 143px; polstring: 10px 10px 10px 10px; bredde: 202px; -moz-grense-radius: 10px; -webkit-grense-radius: 10px; #respond color: #fff; margin: 0 auto 0 auto; bredde: 960 x;
CSS er veldig enkelt. Vi stiller inn html- og kroppsegenskapene for å fjerne marginer og polstring, og fortsett ved å sette noen høyder, bredder og andre egenskaper til elementene våre slik at det ikke ser så blid ut. -moz-grense-radius og -webkit-grense-radius er to egenskaper som tillater oss å lage avrundede grenser (gjelder bare for Mozilla Firefox og Safari 3 for øyeblikket) for elementene våre. La oss ta en titt på HTML:
Enkel Draggable Element Persistence med jQuery Flytt boksen
Som du kan se, installerer vi bare en veldig fin og enkel side som kaller i vårt CSS, JavaScript-bibliotek og plugin, og inneholder elementene som vi skal bruke til å bruke noen effekter og hendelser til. Som et notat er jquery-ui-filen en tilpasset konstruksjon som bare inneholder kjernen og den dragerbare samspillingsfunksjonaliteten.
Nå for noen saftig interaksjon! La oss først se på noen av de grunnleggende funksjonene vi skal bruke for å bruke noen effekter på elementene våre. La oss rive den ned.
Ok nå for noen djevelske! I dette stykket skal vi gjøre et par ting. Først vil vi sette opp et tomt utvalg, og deretter få noen verdier for å fylle det med. Ved å ringe hendelsesbehandleren .mouseup () forteller vi nettleseren å se etter hendelsen når du klikker musen. Vi stiller variabelkoordinatene til lik vår tomme array, og igjen setter variabelkoordinatoren til lik posisjonsprosjektoren til #elementet. Da må vi lage en liste over elementer, disse vil være coordTop: og coordLeft: respektfullt lik vår # elementets venstre og toppstillinger. Med coords.push (item) skyver vi bokstavelig talt vår vareliste og fyller koordinatene med den. Sett deretter den variable rekkefølgen som en ny liste der samordnøkkelen vil være lik vår koordinatrise. Nå for noen AJAX.
$ .post er en AJAX request handler som laster en ekstern side ved hjelp av en HTTP POST-metode. Denne funksjonen ser etter parametrene: URL, data, tilbakeringing og datatype som skal returneres. I denne opplæringen spesifiserer vi updatecoords.php filen som vår nettadresse fordi dette er hvor vi vil sende postdatoen, da definerer vi vår datatype ved å inkludere $ .toJSON-funksjonen som er definert i vår jquery-JSON-plugin og angi vår variabel rekkefølge som dataene som skal håndteres av .toJSON. Deretter lager vi et tilbakering som sjekker om returrespons fra vår PHP-fil etter suksess, og legger til litt smak ved å si, "Hvis det som returneres, er lik suksess da ..." Vi beholder denne html skjult ved å bruke effektbehandleren. , og fortell det å falme på 1000 millisekunder, vent med en timeout i 2000 millisekunder, og fortell det å falme ut igjen. Til slutt bør JavaScript se slik ut:
Plasser JavaScript under HTML-koden, rett etter den avsluttende kroppstegnet.
OK, nå kan vi gjøre forretninger på å gjøre noe med dataene som blir lagt ut fra vår jQuery. Først lar vi lage en enkel database for å lagre våre koordinater, som vi senere vil hente for å definere plasseringen av elementet vårt. For det andre blir vår config.php-fil som lagrer innstillingene for databasetilkobling, og da vil vi fullføre med updatecords.php.
Accentsconagua
Database: 'xycoords' CREATE TABLE Hvis ikke EXISTS 'koordinater' ('id' int (11) IKKE NULL AUTO_INCREMENT, 'x_pos' int (4) IKKE NULL, 'y_pos' int (4) IKKE NULL, PRIMARY KEY ')) ENGINE = MyISAM DEFAULT CHARSET = latin1; config.php
updatecoords.php
koordinater som $ element) // Utdrag X-nummer for panel $ coord_X = preg_replace ('/ [^ \ d \ s] /', ", $ item-> coordTop); // Utdrag Y-nummer for panel $ koord_Y = preg_replace ('/ [^ \ d \ s] /', ", $ item-> coordLeft); // unnslippe våre verdier - som god praksis $ x_coord = mysqli_real_escape_string ($ link, $ coord_X); $ y_coord = mysqli_real_escape_string ($ link, $ coord_Y); // Oppsett forespørselen $ sql = "UPDATE koordinater SET x_pos = '$ x_coord', y_pos = '$ y_coord'"; // Utfør forespørselen mysqli_query ($ link, $ sql) eller dø ("Feil oppdatering Koord:". Mysqli_error ()); // Return Suksess ekko "suksess"; ?> Dette er ganske enkelt å følge. Det første vi ønsker å gjøre er å kontrollere at postdataene sendes til filen. Hvis det skjer, inkluderer vi vår config-fil for vår databaseforbindelse og setter variabelen $ data til json_decode (bestått postvariabel); json_decode er en PHP-funksjon implementert i PHP 5.2.0 som lar oss dekode en JSON-streng.
Siden vår $ data variabelen inneholder en rekke data, må vi rive det fra hverandre for å få verdiene vi trenger. For å gjøre dette tar vi foreach $ data-> koordiner (som er fra vår bestillingsvariabel i JavaScript) som et element. Dette tar hvert nøkkel- og verdipar og lager et objektobjekt fra arrayet, da angir vi og lager en variabel ut av det. Vi bruker dette sammen med preg_replace slik at vi kan ta ut tegnene vi ikke trenger. Vi, så god praksis og et mål på sikkerhet, unnslipper våre verdier for å forberede dem til innsetting i databasen. Hvis alt går bra, må vi returnere suksess til vårt JavaScript for å fortelle det alt gikk bra.
Nå som vi har det vi trenger på plass, for å ta tak i posisjonskoordinatene fra vårt element og sende det til PHP for lagring, må vi endre vår HTML for å gjenspeile plasseringen av elementet vårt. For å gjøre dette endrer vi grunnleggende elementet HTML og i stedet lager det med PHP:
'; ?>
Her konfigurerer vi et grunnleggende søk i databasen for å velge alle rader fra tabellkoordinatene. Vi anvender en stundsløyfe som spesifiserer hver rad vi velger som $ rad. Nå kan vi stille inn noen variabler som tilsvarer hver enkelt rad vi trekker fra databasen, og ekko dem på riktig sted i elementstilen (venstre og topp).
Vel jeg håper at du likte denne opplæringen så mye som jeg skrev det! Det kan ikke være perfekt. Selv om dette bare er en måte å få denne funksjonaliteten i et trekkbart element, er det andre måter (og kanskje bedre) for å oppnå det. Når en slik måte kan være å lagre koordinatverdiene i en informasjonskapsel, for å holde samtaler til databasen på et minimum. Du kan også serialisere verdiene som er overført fra jQuery til PHP i stedet for å bruke JSON. Denne opplæringen er bare ett eksempel som du kan utvide på. Takk for at du leste!
