Semplice persistenza dell'elemento trascinabile con jQuery

A un certo punto potrebbe essere necessario creare un elemento trascinabile all'interno della tua applicazione web. Questa è una grande funzionalità, tuttavia potresti volere o scoprire che hai bisogno che l'elemento rimanga sul posto dopo essere stato trascinato in giro. In questo tutorial ti mostrerò come trascinare con facilità un elemento e farlo aderire, anche dopo il ricaricamento di una pagina, afferrando e memorizzando le sue coordinate X e Y.

Scenario

Quindi hai un elemento nella tua applicazione web. Puoi trascinarlo, metterlo qui e metterlo lì. Ma, quando la pagina viene ricaricata in qualsiasi modo, l'elemento ritorna alla sua posizione predefinita. Mentre vuoi che l'elemento sia trascinabile, non vuoi che si muova dopo essere stato trascinato. Diamo un'occhiata a una soluzione semplice per darci questa capacità.

Iniziare

Per questo tutorial avremo bisogno della libreria jQuery, dell'interfaccia utente jQuery e del plugin jQuery-JSON di Brantley Harris. Useremo anche alcuni database PHP e MySQL per analizzare e archiviare i nostri dati. Se sei nuovo a jQuery, non preoccuparti. jQuery è una libreria JavaScript altamente estensibile, veloce e leggera, divertente e facile da usare. La biblioteca ha una documentazione ben strutturata e una grande comunità. Questo è il mio primo tutorial su jQuery e JavaScript, quindi per favore portami con me. Spero di spiegare tutto nel miglior modo possibile e se hai domande, non esitare a chiedere.

Il codice HTML amd

Ho voluto iniziare con l'HTML e lo stile per questo tutorial poiché l'effetto è applicato agli elementi HTML, aiuta a visualizzare ciò che faremo, subito. Prima il CSS:

 html, body background: # 151515; margine: 0 0 0 0; riempimento: 0 0 0 0;  #glassbox background: # 333; border: 1px solid # 000; altezza: 400px; margine: 30px auto auto auto; position: relative; larghezza: 960px; -moz-border-radius: 10px; -webkit-border-radius: 10px;  #element background: # 666; bordo: 1px # 000 solido; cursore: spostare; altezza: 143px; imbottitura: 10px 10px 10px 10px; larghezza: 202px; -moz-border-radius: 10px; -webkit-border-radius: 10px;  #respond color: #fff; margine: 0 auto 0 auto; larghezza: 960px; 

Il CSS è molto semplice. Impostiamo le proprietà html e body per cancellare i margini e il padding, e continuiamo impostando altezze, larghezze e altre proprietà ai nostri elementi in modo che non sembrino così insignificanti. -moz-border-radius e -webkit-border-radius sono due proprietà che ci permettono di creare bordi arrotondati (applicabili solo a Mozilla Firefox e Safari 3 al momento) per i nostri elementi. Diamo un'occhiata all'HTML:

            
 
Sposta la scatola
 
 

Come puoi vedere, impostiamo una pagina molto carina e semplice che chiama nel nostro CSS, nella libreria JavaScript e nei plugin, e contiene gli elementi che utilizzeremo per applicare alcuni effetti ed eventi. Come nota, il file jquery-ui è una build personalizzata che include solo il core e la funzionalità di interazione trascinabile.

Il Javascript

Ora per qualche interazione succosa! Diamo prima un'occhiata ad alcune delle funzioni di base che useremo per applicare alcuni effetti ai nostri elementi. Facciamo a pezzi.

Ok ora per qualche diavoleria! In questo frammento faremo un paio di cose. Per prima cosa vogliamo configurare un array vuoto e quindi ottenere alcuni valori per riempirlo. Chiamando il gestore di eventi .mouseup () stiamo dicendo al browser di cercare l'evento quando si rimuove il mouse. Impostiamo le stringhe variabili per eguagliare la nostra matrice vuota, e di nuovo impostiamo la variabile coord per eguagliare il gestore di posizione del nostro #elemento. Quindi dobbiamo creare una lista di elementi, questi saranno coordTop: e coordLeft: rispettando con rispetto le posizioni sinistra e superiore del nostro elemento #. Con coords.push (item) stiamo letteralmente spingendo la nostra lista di oggetti e riempiendo l'array coords con esso. Quindi imposta l'ordine delle variabili come una nuova lista in cui il tasto coords sarà uguale al nostro array coords. Ora per alcuni AJAX.

$ .post è un gestore di richieste AJAX che carica una pagina remota utilizzando un metodo POST HTTP. Questa funzione cerca i parametri: url, data, callback e tipo di dati da restituire. In questo tutorial specifichiamo il file updatecoords.php come nostro URL perché è qui che vogliamo inviare i nostri dati post, quindi definiamo il nostro tipo di dati includendo la funzione $ .toJSON definita nel nostro plugin jquery-JSON e impostando il nostro ordine variabile come i dati che devono essere gestiti da .toJSON. Successivamente creiamo un callback che verifica una risposta di ritorno dal nostro file PHP in caso di successo e aggiunge un po 'di sapore dicendo "Se ciò che viene restituito è uguale al successo allora ..." Manteniamo questo html nascosto usando il gestore di effetti .hide , e ditelo di dissolversi a 1000 millisecondi, attendi con un timeout per 2000 millisecondi e digli di svanire di nuovo. Alla fine il nostro JavaScript dovrebbe assomigliare a questo:

Inserisci il codice JavaScript sotto l'HTML, subito dopo il tag body di chiusura.

Il PHP

Bene, ora facciamo affari per fare qualcosa con i dati inviati dal nostro jQuery. Per prima cosa creiamo un semplice database per memorizzare le nostre coordinate, che poi recupereremo per definire la posizione del nostro elemento. Il secondo sarà il nostro file config.php che memorizzerà le nostre impostazioni di connessione al database, e quindi termineremo con updatecords.php.

 Database: 'xycoords' CREATE TABLE SE NON ESISTE 'coords' ('id' int (11) NOT NULL AUTO_INCREMENT, 'x_pos' int (4) NOT NULL, 'y_pos' int (4) NOT NULL, PRIMARY KEY ('id ')) ENGINE = MyISAM DEFAULT CHARSET = latin1;

config.php

updatecoords.php

 coorda come $ item) // Estrai il numero X per il pannello $ coord_X = preg_replace ('/ [^ \ d \ s] /', ", $ item-> coordTop); // Estrai il numero Y per il pannello $ coord_Y = preg_replace ('/ [^ \ d \ s] /', ", $ item-> coordLeft); // sfuggire ai nostri valori - come buona pratica $ x_coord = mysqli_real_escape_string ($ link, $ coord_X); $ y_coord = mysqli_real_escape_string ($ link, $ coord_Y); // Imposta la nostra query $ sql = "UPDATE coords SET x_pos = '$ x_coord', y_pos = '$ y_coord'"; // Esegue la nostra query mysqli_query ($ link, $ sql) o die ("Errore nell'aggiornamento di Coords:". Mysqli_error ());  // Return Success echo "success"; ?>

Questo è abbastanza semplice da seguire. La prima cosa che vogliamo fare è verificare che i nostri dati del post siano passati al file. Se ciò accade, includiamo il nostro file di configurazione per la nostra connessione al database e impostiamo la variabile $ data in json_decode (variabile post passata); json_decode è una funzione PHP implementata in PHP 5.2.0 che ci consente di decodificare una stringa JSON.

Poiché la nostra variabile $ data contiene una serie di dati, dobbiamo separarli per ottenere i valori di cui abbiamo bisogno. Per fare questo prendiamo come $ item-> coords (che è dalla nostra variabile di ordine nel nostro JavaScript) come oggetto. Questo prende ogni coppia di chiavi e valori e crea un oggetto item dall'array, quindi specifichiamo e creiamo una variabile al di fuori di esso. Usiamo questo in congiunzione con preg_replace in modo che possiamo eliminare i caratteri che non abbiamo bisogno. Quindi, come buona pratica e misura di sicurezza, sfuggiamo ai nostri valori per prepararli all'inserimento nel database. Se tutto va bene, dobbiamo restituire il successo al nostro JavaScript per far sapere che tutto è andato bene.

infine

Ora che abbiamo ciò di cui abbiamo bisogno, per prendere le coordinate di posizione dal nostro elemento e passarlo a PHP per la memorizzazione, dobbiamo modificare il nostro HTML per riflettere la posizione del nostro elemento. Per fare questo cambiamo l'elemento base HTML e invece lo creiamo con PHP:

 
 Sposta la scatola
'; ?>