Einfaches Draggable-Element-Persistenz mit jQuery

Zu einem bestimmten Zeitpunkt müssen Sie möglicherweise ein ziehbares Element in Ihrer Webanwendung erstellen. Dies ist eine großartige Funktion, Sie können jedoch das Element nach dem Ziehen an seinem Platz beibehalten. In diesem Tutorial zeige ich Ihnen, wie Sie ein Element einfach ziehen und nach dem Neuladen der Seite kleben lassen, indem Sie seine X- und Y-Koordinaten greifen und speichern.

Szenario

Sie haben also ein Element in Ihrer Webanwendung. Sie können es herumziehen, hier ablegen und dort ablegen. Wenn die Seite jedoch auf irgendeine Weise neu geladen wird, kehrt das Element an seine Standardposition zurück. Während das Element ziehbar sein soll, soll es nicht nach dem Ziehen verschoben werden. Sehen wir uns eine einfache Lösung an, um uns diese Fähigkeit zu geben.

Fertig machen

Für dieses Tutorial benötigen wir die jQuery-Bibliothek, die jQuery-Benutzeroberfläche und das jQuery-JSON-Plugin von Brantley Harris. Wir werden auch PHP und eine MySQL-Datenbank verwenden, um unsere Daten zu analysieren und zu speichern. Wenn Ihr neu bei jQuery ist, keine Sorge. jQuery ist eine äußerst erweiterbare, schnelle und leichtgewichtige JavaScript-Bibliothek, die Spaß macht und einfach zu bedienen ist. Die Bibliothek verfügt über eine sehr schön strukturierte Dokumentation und eine große Community. Dies ist mein erstes Tutorial zu jQuery und JavaScript. Bitte haben Sie etwas Geduld mit mir. Ich hoffe, ich erkläre alles so gut ich kann und wenn Sie Fragen haben, können Sie sich gerne an uns wenden.

Das HTML und CSS

Ich wollte mit HTML und Styling für dieses Lernprogramm beginnen, da der Effekt auf HTML-Elemente angewendet wird. Er hilft dabei, zu visualisieren, was wir tun werden, und zwar sofort. Zuerst das CSS:

 HTML, Körper Hintergrund: # 151515; Marge: 0 0 0 0; Auffüllen: 0 0 0 0;  #glassbox background: # 333; Grenze: 1px fest # 000; Höhe: 400px; Marge: 30px Auto Auto Auto; Position: relativ; Breite: 960px; -moz-border-radius: 10px; -webkit-border-radius: 10px;  #element background: # 666; Grenze: 1px # 000 fest; Cursor: bewegen; Höhe: 143px; Auffüllen: 10px 10px 10px 10px; Breite: 202px; -moz-border-radius: 10px; -webkit-border-radius: 10px;  #respond Farbe: #fff; Marge: 0 auto 0 auto; Breite: 960px; 

Das CSS ist sehr einfach. Wir legen die HTML- und Körpereigenschaften so fest, dass Ränder und Füllungen gelöscht werden, und setzen dann einige Höhen, Breiten und andere Eigenschaften für unsere Elemente fest, sodass sie nicht so fad aussehen. -moz-border-radius und -webkit-border-radius sind zwei Eigenschaften, mit denen wir für unsere Elemente abgerundete Rahmen (nur für Mozilla Firefox und Safari 3 anwendbar) erstellen können. Schauen wir uns das HTML an:

            
 
Verschiebe die Box
 
 

Wie Sie sehen, haben wir nur eine sehr schöne und einfache Seite eingerichtet, die in unserer CSS-, JavaScript-Bibliothek und Plugins aufruft und die Elemente enthält, auf die wir einige Effekte und Ereignisse anwenden. Die Jquery-ui-Datei ist ein benutzerdefiniertes Build, das nur den Kern und die ziehbare Interaktionsfunktion enthält.

Das Javascript

Nun zu einer saftigen Interaktion! Werfen wir zunächst einen Blick auf einige der grundlegenden Funktionen, die wir verwenden werden, um einige Effekte auf unsere Elemente anzuwenden. Lass es uns abreißen.

Ok jetzt für etwas Teufelei! In diesem Ausschnitt werden wir ein paar Dinge tun. Zuerst möchten wir ein leeres Array einrichten und dann einige Werte erhalten, um es zu füllen. Durch den Aufruf des Event-Handlers .mouseup () weisen wir den Browser an, nach dem Ereignis zu suchen, wenn Sie die Maustaste loslassen. Wir setzen die Variablenkoordinaten auf unser leeres Array und setzen die Variablenkoordinaten erneut auf den Positionshandler unseres # Elements. Dann müssen wir eine Liste mit Elementen erstellen. Diese werden coordTop: und coordLeft: respektvoll den linken und oberen Positionen unseres # Elements. Mit coords.push (item) verschieben wir buchstäblich unsere Artikelliste und füllen das Coords-Array damit. Legen Sie dann die variable Reihenfolge als neue Liste fest, in der der Koord-Schlüssel unserem Koord-Array entspricht. Nun zu etwas AJAX.

$ .post ist ein AJAX-Request-Handler, der eine Remote-Seite mit einer HTTP-POST-Methode lädt. Diese Funktion sucht nach den Parametern: URL, Daten, Rückruf und Datentyp, die zurückgegeben werden sollen. In diesem Tutorial geben wir die updatecoords.php-Datei als URL an, da hier unsere Postdaten gesendet werden sollen. Dann definieren wir unseren Datentyp, indem wir die in unserem Jquery-JSON-Plugin definierte $ .toJSON-Funktion hinzufügen und unsere variable Reihenfolge als festlegen die Daten, die von .toJSON verarbeitet werden sollen. Als Nächstes erstellen wir einen Rückruf, der nach Erfolg auf eine Rückantwort aus unserer PHP-Datei prüft, und fügt ein wenig Geschmack hinzu, indem wir sagen: "Wenn das, was zurückgegeben wird, gleich Erfolg ist ..." Diese HTML-Datei wird mithilfe des Effekt-Handlers .hide verborgen , und sagen Sie, dass es bei 1000 Millisekunden eingeblendet werden soll, warten Sie mit einem Timeout für 2000 Millisekunden, und sagen Sie, dass es wieder ausgeblendet werden soll. Am Ende sollte unser JavaScript so aussehen:

Platzieren Sie das JavaScript unterhalb des HTML-Codes direkt nach dem schließenden body-Tag.

Das PHP

Okay, jetzt können wir uns mit den Daten aus unserer jQuery befassen. Erstellen Sie zunächst eine einfache Datenbank zum Speichern unserer Koordinaten, die wir später abrufen, um die Position unseres Elements zu definieren. Die zweite wird unsere config.php-Datei sein, in der unsere Datenbankverbindungseinstellungen gespeichert werden, und dann werden wir mit updatecords.php abschließen.

 Datenbank: 'xycoords' CREATE TABLE WENN KEINE EXISTEN 'coords' ('id' int (11) NOT NULL) AUTO_INCREMENT, 'x_pos' int (4) NOT NULL, 'y_pos' int (4) NOT NULL, Primärschlüssel ('id.) ')) ENGINE = MyISAM DEFAULT CHARSET = Latin1;

config.php

updatecoords.php

 coord als $ item) // X-Nummer für Panel $ coord_X = preg_replace ('/ [^ \ d \ s] /', ", $ item-> coordTop) extrahieren; // Y-Nummer für Panel $ coord_Y = preg_replace extrahieren ('/ [^ \ d \ s] /', ", $ item-> coordLeft); // Flucht vor unseren Werten - als bewährte Methode $ x_coord = mysqli_real_escape_string ($ link, $ coord_X); $ y_coord = mysqli_real_escape_string ($ link, $ coord_Y); // Stelle unsere Abfrage ein $ sql = "UPDATE koordiniert SET x_pos = '$ x_coord', y_pos = '$ y_coord'"; // Unsere Abfrage ausführen mysqli_query ($ link, $ sql) oder die ("Fehler beim Aktualisieren von Coords:". Mysqli_error ());  // Erfolg zurückgeben echo "success"; ?>

Das ist ziemlich einfach zu folgen. Das erste, was wir tun wollen, ist zu prüfen, ob die Postdaten an die Datei übergeben werden. In diesem Fall fügen wir unsere Konfigurationsdatei für unsere Datenbankverbindung hinzu und setzen die Variable $ data auf json_decode (übergebene post-Variable). json_decode ist eine in PHP 5.2.0 implementierte PHP-Funktion, mit der wir einen JSON-String dekodieren können.

Da unsere $ data-Variable ein Array von Daten enthält, müssen wir sie zerlegen, um die benötigten Werte zu erhalten. Zu diesem Zweck nehmen wir $ data-> coords (was in unserer JavaScript-Bestellvariablen enthalten ist) als Artikel an. Dies nimmt jedes Schlüssel- und Wertepaar und erstellt ein Elementobjekt aus dem Array. Anschließend legen wir eine Variable fest und erstellen daraus eine Variable. Wir verwenden dies in Verbindung mit preg_replace, damit wir die nicht benötigten Zeichen herausnehmen können. Als bewährte Methode und als Sicherheitsmaßnahme entgehen wir dann unseren Werten, um sie für das Einfügen in die Datenbank vorzubereiten. Wenn alles gut geht, müssen wir unseren JavaScript-Erfolg wiederholen, um wissen zu lassen, dass alles gut gelaufen ist.

zuletzt

Nun, da wir alles haben, was wir brauchen, um die Positionskoordinaten von unserem Element zu übernehmen und zum Speichern an PHP zu übergeben, müssen wir unseren HTML-Code ändern, um die Position unseres Elements wiederzugeben. Dazu ändern wir das Basiselement HTML und erstellen es stattdessen mit PHP:

 
 Verschiebe die Box
'; ?>