Element simplu de trasabil Persistenta cu jQuery

La un moment dat, poate fi necesar să creați un element dragutabil în cadrul aplicației dvs. web. Aceasta este o funcționalitate excelentă, însă este posibil să doriți sau să aflați că aveți nevoie ca elementul să rămână pe loc după ce a fost târât în ​​jur. În acest tutorial vă voi arăta cum să trageți cu ușurință un element și să îl lipiți, chiar și după reîncărcarea unei pagini, prin apucarea și stocarea coordonatelor lui X și Y.

Scenariu

Deci, aveți un element în aplicația dvs. web. Puteți să-l trageți, puneți-l aici și puneți-l acolo. Dar, când pagina este reîncărcată în orice mod, elementul revine la poziția sa implicită. În timp ce doriți ca elementul să fie draggable, nu doriți să se miște după ce a fost tras. Să ne uităm la o soluție simplă pentru a ne da această abilitate.

Noțiuni de bază

Pentru acest tutorial vom avea nevoie de biblioteca jQuery, jQuery UI și plugin-ul jQuery-JSON de către Brantley Harris. Vom folosi de asemenea o bază de date PHP și o bază de date MySQL pentru a analiza și stoca datele noastre. În cazul în care noul dvs. la jQuery, nu vă faceți griji. jQuery este o bibliotecă JavaScript extrem de extensibilă, rapidă și ușoară, care este amuzantă și ușor de folosit. Biblioteca are o documentație foarte bine structurată și o comunitate uriașă. Acesta este primul meu tutorial pe jQuery și JavaScript, deci vă rugăm să purtați cu mine. Sper sa explic totul cat de bine pot si daca aveti intrebari, va rog sa va adresati.

CSS HTML și CSS

Am vrut să încep cu HTML și stilul pentru acest tutorial, deoarece efectul este aplicat elementelor HTML, vă ajută să vizualizați ceea ce vom face, chiar de pe lilieci. Mai întâi CSS:

 html, corp background: # 151515; marja: 0 0 0 0; umplutură: 0 0 0 0;  #glassbox background: # 333; frontieră: 1px solid # 000; height: 400px; margine: 30 pixeli auto auto auto; Poziția: relativă; lățime: 960 x; -moz-border-radius: 10px; -webkit-border-radius: 10px;  #element background: # 666; frontieră: 1px # 000 solid; cursor: muta; height: 143px; umplutura: 10px 10px 10px 10px; lățime: 202px; -moz-border-radius: 10px; -webkit-border-radius: 10px;  #respond culoare: #fff; marja: 0 auto 0 auto; lățime: 960 x; 

CSS este foarte simplu. Am stabilit proprietățile html și corp pentru a șterge margini și umplutură și continuați prin stabilirea unor înălțimi, lățimi și alte proprietăți elementelor noastre, astfel încât să nu pară atât de blande. -moz-border-radius și -webkit-border-radius sunt două proprietăți care ne permit să creăm granițe rotunjite (aplicabile numai momentan Mozilla Firefox și Safari 3) pentru elementele noastre. Să aruncăm o privire la HTML:

            
 
Mutați Cutia
 
 

După cum puteți vedea, noi configurăm o pagină foarte frumoasă și simplă, care sună în biblioteca și pluginurile noastre CSS, JavaScript și conține elementele pe care le vom folosi pentru a aplica anumite efecte și evenimente. Ca o notă, fișierul jquery-ui este o construcție personalizată care include doar funcția de bază și funcția de interacțiune draggabilă.

Javascriptul

Acum, pentru o interacțiune suculentă! Mai întâi, aruncăm o privire asupra unora dintre funcțiile de bază pe care le vom folosi pentru a aplica anumite efecte elementelor noastre. Să-l rupem.

Ok, acum pentru niște diavoli! În acest fragment vom face câteva lucruri. Mai întâi dorim să setăm o matrice goală și apoi să luăm câteva valori pentru ao completa. Apelând handler-ul evenimentului .mouseup (), îi spunem browser-ului să caute evenimentul atunci când desfaceți mouse-ul. Am setat coardele variabilei la egal cu matricea noastră goală și, din nou, setăm coordonatul variabil să fie egal cu mânerul de poziție al # elementului nostru. Apoi trebuie să creați o listă de elemente, acestea vor fi coordTop: și coordLeft: respectând echivalentul pozițiilor stânga și de sus ale elementului #. Cu coords.push (element), suntem literalmente împingând lista noastră de articole și umplând matricea coordonate cu ea. Apoi setați ordinea variabilă ca o listă nouă unde cheia coardelor va egala matricea coordonelor noastre. Acum, pentru unele AJAX.

$ .post este un handler de solicitare AJAX care încarcă o pagină de la distanță utilizând o metodă HTTP POST. Această funcție caută parametrii: url, date, callback și tipul de date care trebuie returnate. În acest tutorial specificăm fișierul updatecoords.php ca fiind URL-ul nostru, deoarece aici este locul în care dorim să trimitem datele postului, apoi definim tipul de date prin includerea funcției $ .toJSON definită în pluginul jquery-JSON și setarea comenzii noastre variabile datele care trebuie prelucrate de către .toJSON. Apoi vom crea un apel invers care verifică răspunsul de întoarcere din fișierul nostru PHP după succes și adăugăm un pic de aromă spunând: "Dacă ceea ce este returnat este egal cu succes atunci ..." păstrăm acest html ascuns folosind handle-ul de efecte .hide , și spuneți-i să se estompeze la 1000 de milisecunde, așteptați cu un timp de expirare de 2000 milisecunde și spuneți-i să se estompeze din nou. În final, JavaScript ar trebui să arate astfel:

Plasați JavaScript sub codul HTML imediat după eticheta de închidere a corpului.

PHP

În regulă, acum vă permiteți să faceți afaceri pentru a face ceva cu datele trimise de jQuery. În primul rând, putem crea o bază de date simplă pentru a stoca coordonatele noastre, pe care le vom recupera mai târziu pentru a defini poziția elementului nostru. În al doilea rând va fi fișierul nostru config.php care va stoca setările de conectare a bazei de date și apoi vom termina cu updatecords.php.

 Baza de date: 'xycoords' CREATE TABLE DACĂ NU EXISTĂ "coords" ('id' int (11) NOT NULL AUTO_INCREMENT, 'x_pos' int (4) NOT NULL, 'y_pos' ')) MOTOR = MyISAM DEFAULT CHARSET = latin1;

config.php

updatecoords.php

 coordonate ca element $) // Extrage numarul X pentru panoul $ coord_X = preg_replace ('/ [^ \ d \ s] /', '$ $-> coordTop); ('/ [^ \ d \ s] /', ', $ item-> coordLeft); // scăpați de valorile noastre - ca bună practică $ x_coord = mysqli_real_escape_string ($ link, $ coord_X); $ y_coord = mysqli_real_escape_string ($ link, $ coord_Y); // Configurați întrebarea noastră $ sql = "UPDATE coords SET x_pos = '$ x_coord', y_pos = '$ y_coord'"; // Executați întrebarea mysqli_query ($ link, $ sql) sau mori ("Eroare la actualizarea Coords:" mysqli_error ());  // Return Success echo "succes"; ?>

Acest lucru este destul de simplu de urmat. Primul lucru pe care dorim să-l facem este să verificăm dacă datele noastre post sunt transferate în fișier. Dacă se întâmplă acest lucru, vom include fișierul nostru de configurare pentru conexiunea bazei de date și vom seta variabila $ data la json_decode (variabilă post postat); json_decode este o funcție PHP implementată în PHP 5.2.0 care ne permite să decodăm un șir JSON.

Din moment ce variabila noastră de date conține o serie de date, trebuie să o distrugem pentru a obține valorile de care avem nevoie. Pentru a face acest lucru, luăm ca un element foreach $ data-> coords (care este de la variabila noastră de comandă în JavaScript). Aceasta ia fiecare pereche cheie și valoare și creează un obiect de elemente din matrice, apoi specificăm și creăm o variabilă din ea. Folosim acest lucru împreună cu preg_replace pentru a putea scoate personajele de care nu avem nevoie. Apoi, ca o bună practică și o măsură de securitate, scăpăm de valorile noastre pentru a le pregăti pentru a fi inserate în baza de date. Dacă totul merge bine, trebuie să ne întoarcem succesul la JavaScript pentru a-i spune că totul a mers bine.

în cele din urmă

Acum, când avem ceea ce avem nevoie, să luăm coordonatele poziției din elementul nostru și să-l transmitem PHP pentru stocare, trebuie să ne modificăm codul HTML pentru a reflecta poziția elementului nostru. Pentru a face acest lucru schimbăm elementul HTML de bază și, în schimb, îl creăm cu PHP:

 
 Mutați Cutia
„; ?>