Un element simplu, drag and drop pe jQuery
Există momente în care poate fi necesar să creați un element tras în interiorul aplicației dvs. web. Aceasta este o funcționalitate excelentă, dar poate doriți ca elementul să rămână într-un loc nou, după tragere. În articolul de astăzi, veți afla cum să trageți ușor și să ancorați un element nou în noua locație, chiar și după reîncărcarea paginii, prin captarea și stocarea coordonatelor X și Y.
Deci, aveți un element pe pagină. Puteți să-l trageți înainte și înapoi. Dar când pagina se reîncarcă, elementul revine la poziția inițială. Și deși avem nevoie de elementul care trebuie tras, este necesar ca elementul nostru să fie tras o dată. Să ne uităm la o soluție simplă care implementează această funcție.
HTML și CSS
Să începem cu marcaj HTML și stiluri pentru exemplul nostru. În primul rând, CSS:
CSS este foarte simplu. Atribuiți proprietăți html și body null, pentru a curăța linii exterioare și interioare, apoi setați înălțimea, lățimea și alte proprietăți pentru elementele noastre. - moz-border-radius și -webkit-border-radius sunt două proprietăți care ne permit să creăm colțuri rotunjite (funcționează numai în Mozilla Firefox și Safari 3) pentru elementele noastre. Acum, să aruncăm o privire la HTML:
Acum cel mai interesant! Mai întâi, să ne uităm la funcțiile de bază pe care le vom folosi pentru a aplica anumite efecte elementelor noastre. Vom analiza totul în partea de jos.
În cadrul acestui fragment, vom apela, mousemove de tratare a evenimentului și spune-i: „Atunci când mouse-ul este mutat, setați coord variabilă egală cu valoarea poziției curente a #element noastre bloc» Apoi vom obține ultima secțiune în blocul # ( «p: ultima») și text de imprimare, ieșind valorile proprietăților stânga (x) și vârful (y) ale elementului nostru, față de obiectul parent (care este #glassbox).
Ei bine, da, este deja mult mai complicat. În acest fragment vom face multe lucruri. Mai întâi, setăm o matrice goală și apoi obținem câteva valori pentru ao umple. Apelând handle-ul de evenimente .mouseup (), îi spunem browser-ului să urmărească evenimentul când eliberați butonul mouse-ului. Specificăm că variabila coardă este o matrice goală și se stabilește din nou valoarea acesteia în poziția blocului #element.
Apoi, trebuie să creați o listă cu două linii care vor fi coordonTop: și coordLeft. corespunzând pozițiilor stângi și de sus. blocul nostru. Utilizați coardele de coarde.push (element). vom completa lista noastră cu o serie de coordonate. Apoi am setat ordinea variabilă ca o listă nouă, în care cheia de coarde se va potrivi cu gama noastră de coarde. Acum un pic de ajax.
$ .post este un handler de solicitare AJAX care încarcă o pagină de la distanță utilizând metoda POST HTTP. Această funcție are parametrii următori: url, data, răspuns și tipul de date pentru retur. În acest exemplu, vom spune că fișierul updatecoords.php este URL-ul nostru, deoarece exact aceste fișiere vrem să trimitem datele noastre. Apoi, vom descrie tipul de date utilizând funcția $ .toJSON. definită în plug-in-ul JSON și atribuirea unei variabile de comandă. ca datele care ar trebui să se întoarcă.
Puneți acest cod sub codul HTML imediat după eticheta de închidere a corpului.
Să facem ceva cu datele provenite din JQuery. Mai întâi trebuie să creați o bază de date simplă pentru a stoca coordonatele noastre, pe care le vom folosi mai târziu pentru a determina poziția elementului nostru. Apoi, avem nevoie de fișierul config.php, în care vom scrie parametrii de conectare la baza de date, apoi vom merge la updatecords.php.
Aici totul este simplu. Primul lucru pe care îl facem este să verificăm dacă datele au fost transferate într-un fișier. Dacă se întâmplă acest lucru, vom include fișierul nostru config.php și vom atribui variabilei $ date valoarea json_decode (variabila posta); json_decode este o funcție PHP introdusă în PHP 5.2.0, care vă permite să decodificați șirul JSON.
În concluzie
Acum, când suntem cu toții înființați, pentru a obține coordonatele elementului și a le transmite în PHP pentru scriere, va trebui să modificăm marcajul HTML pentru a afișa poziția elementului. Pentru aceasta, vom elimina marcajul HTML simplu și îl vom crea folosind PHP:
Aici vom executa o interogare simplă în baza de date pentru a selecta toate rândurile din tabelul coordonatelor. Apoi se numește buclă în timp, care definește fiecare linie pe care o selectăm ca rând $. Acum, putem atribui variabile fiecărei linii individuale din baza de date și le putem scoate în locul potrivit.
Spune prietenilor tăi
Articole similare
Trimiteți-le prietenilor: