Simple Draggable Element Persistence met jQuery

Op een gegeven moment moet u misschien een dragbaar element binnen uw webtoepassing maken. Dit is een geweldige functionaliteit, maar misschien wilt u of vindt u dat u het element nodig heeft om op zijn plaats te blijven nadat het is gesleept. In deze tutorial laat ik je zien hoe je gemakkelijk een element sleept en laat plakken, zelfs na het opnieuw laden van een pagina, door de X- en Y-coördinaten vast te pakken en op te slaan.

Scenario

Dus je hebt een element in je webapplicatie. Je kunt het rondslepen, hier neerzetten en daar neerleggen. Maar wanneer de pagina op enigerlei wijze opnieuw wordt geladen, keert het element terug naar de standaardpositie. Terwijl u wilt dat het element versleepbaar is, wilt u niet dat het element wordt verplaatst nadat het is gesleept. Laten we naar een eenvoudige oplossing kijken om ons deze mogelijkheid te geven.

Ermee beginnen

Voor deze tutorial hebben we de jQuery-bibliotheek, de jQuery-gebruikersinterface en de jQuery-JSON-plug-in van Brantley Harris nodig. We zullen ook een aantal PHP- en een MySQL-database gebruiken om onze gegevens te ontleden en op te slaan. Als je nieuw bent in jQuery, geen zorgen. jQuery is een zeer uitbreidbare, snelle en lichtgewicht JavaScript-bibliotheek die zowel leuk als gebruiksvriendelijk is. De bibliotheek heeft zeer mooi gestructureerde documentatie en een enorme community. Dit is mijn eerste zelfstudie over jQuery en JavaScript, dus wees geduldig. Ik hoop alles zo goed mogelijk uit te leggen en als u vragen hebt, kunt u dit gerust stellen.

De HTML en CSS

Ik wilde beginnen met de HTML en styling voor deze tutorial omdat het effect wordt toegepast op HTML-elementen, het helpt om te visualiseren wat we gaan doen, meteen uit de slag. Eerst de CSS:

 html, body background: # 151515; marge: 0 0 0 0; opvulling: 0 0 0 0;  #glassbox background: # 333; grens: 1px vast # 000; Hoogte: 400px; marge: 30px auto auto auto; position: relative; Breedte: 960; -moz-border-radius: 10px; -webkit-border-radius: 10px;  #element background: # 666; grens: 1px # 000 vast; cursor: move; Hoogte: 143px; opvulling: 10px 10px 10px 10px; width: 202px; -moz-border-radius: 10px; -webkit-border-radius: 10px;  #respond color: #fff; marge: 0 auto 0 auto; Breedte: 960; 

De CSS is heel eenvoudig. We hebben de html- en lichaamseigenschappen ingesteld om marges en opvulling te wissen en verder te gaan door een aantal hoogten, breedten en andere eigenschappen in te stellen voor onze elementen, zodat het er niet zo flauw uitziet. -moz-border-radius en -webkit-border-radius zijn twee eigenschappen waarmee we afgeronde randen kunnen maken (alleen van toepassing op Mozilla Firefox en Safari 3 op dit moment) voor onze elementen. Laten we de HTML eens bekijken:

            
 
Verplaats de doos
 
 

Zoals je ziet hebben we gewoon een heel mooie en eenvoudige pagina opgezet die onze CSS, JavaScript-bibliotheek en plug-ins oproept, en bevat de elementen die we zullen gebruiken om sommige effecten en gebeurtenissen toe te passen. Als een opmerking, het jQuery-ui-bestand is een aangepaste build die alleen de kern- en de versleepbare interactiefunctionaliteit bevat.

Het Javascript

Nu voor wat sappige interactie! Laten we eerst eens kijken naar enkele basisfuncties die we zullen gebruiken om een ​​aantal effecten op onze elementen toe te passen. Laten we het afbreken.

Ok nu voor wat duivels! In dit fragment gaan we een aantal dingen doen. Eerst willen we een lege array instellen en vervolgens een aantal waarden ophalen om deze te vullen. Door de gebeurtenishandler .mouseup () aan te roepen, vertellen we de browser om naar de gebeurtenis te zoeken wanneer u de muisknop loslaat. We stellen de variabele coords gelijk aan onze lege array en stellen de variabele coord opnieuw gelijk aan de positie-handler van ons #element. Vervolgens moeten we een lijst met items maken, dit zullen coordTop: en coordLeft zijn: respectvol gelijkstellen van de linker- en de bovenpositie van ons # -element. Met coords.push (item) duwen we letterlijk onze itemslijst en vullen we de coords-array ermee in. Stel vervolgens de variabele volgorde in als een nieuwe lijst waar de coördinaten sleutel gelijk zal zijn aan onze coords array. Nu voor wat AJAX.

$ .post is een AJAX-verzoekhandler die een externe pagina laadt met behulp van een HTTP POST-methode. Deze functie zoekt naar de parameters: url, data, callback en gegevenstype die moeten worden geretourneerd. In deze zelfstudie specificeren we het bestand updatecoords.php als onze URL, omdat we hier onze postgegevens willen verzenden. Vervolgens definiëren we ons datatype door de $ .toJSON-functie op te nemen die is gedefinieerd in onze jQuery-JSON-plug-in en onze variabele volgorde in te stellen als de gegevens die moeten worden afgehandeld door .toJSON. Vervolgens maken we een terugroepactie die na een succesvolle poging een terugmelding van ons PHP-bestand controleert en een beetje smaak toevoegt door te zeggen: "Als wat terugkomt gelijk is aan succes dan ..." We houden deze html verborgen door de effecthandler te gebruiken. , en vertel het om langzaam te verdwijnen met 1000 milliseconden, wacht een time-out van 2000 milliseconden af ​​en zeg dat het weer moet vervagen. Op het einde zou ons JavaScript er als volgt uit moeten zien:

Plaats de JavaScript-code onder de HTML, direct na de afsluitende body-tag.

De PHP

Oké, laten we nu gaan werken aan iets doen met de gegevens die worden gepost vanuit ons jQuery. Maak eerst een eenvoudige database om onze coördinaten op te slaan, die we later zullen ophalen om de positie van ons element te bepalen. Ten tweede zal ons config.php-bestand onze database verbindingsinstellingen opslaan en dan zullen we eindigen met updatecords.php.

 Database: 'xycoords' CREATE TABLE INDIEN NIET BESTAAT 'coords' ('id' int (11) NOT NULL AUTO_INCREMENT, 'x_pos' int (4) NOT NULL, 'y_pos' int (4) NOT NULL, PRIMARY KEY ('id ')) MOTOR = MyISAM DEFAULT CHARSET = latin1;

config.php

updatecoords.php

 coords als $ item) // Extract X-nummer voor paneel $ coord_X = preg_replace ('/ [^ \ d \ s] /', ", $ item-> coordTop); // Extract Y-nummer voor paneel $ coord_Y = preg_replace ('/ [^ \ d \ s] /', ", $ item-> coordLeft); // ontsnap aan onze waarden - als goede praktijk $ x_coord = mysqli_real_escape_string ($ link, $ coord_X); $ y_coord = mysqli_real_escape_string ($ link, $ coord_Y); // Stel onze query in $ sql = "UPDATE coords SET x_pos = '$ x_coord', y_pos = '$ y_coord'"; // Voer onze Query mysqli_query uit ($ link, $ sql) of sterf ("Fout bij bijwerken van Coords:". Mysqli_error ());  // Return Success echo "succes"; ?>

Dit is vrij eenvoudig te volgen. Het eerste wat we willen doen, is controleren of onze postgegevens worden doorgegeven aan het bestand. Als dat gebeurt, nemen we ons configuratiebestand voor onze databaseverbinding op en stellen we de variabele $ data in op json_decode (variabele met doorgegeven post); json_decode is een PHP-functie geïmplementeerd in PHP 5.2.0 waarmee we een JSON-reeks kunnen decoderen.

Omdat onze variabele $ data een array van gegevens bevat, moeten we deze uit elkaar halen om de waarden te krijgen die we nodig hebben. Om dit te doen nemen we foreach $ data-> coords (dat is van onze bestelvariabele in ons JavaScript) als een item. Dit neemt elk sleutel- en waardepaar en maakt een itemobject uit de array, we specificeren en maken er vervolgens een variabele van. We gebruiken dit in combinatie met preg_replace, zodat we de personages kunnen verwijderen die we niet nodig hebben. Wij dan, als goede praktijk en een mate van veiligheid, ontsnappen aan onze waarden om hen voor te bereiden op invoeging in de database. Als alles goed gaat, moeten we het succes terugsturen naar ons JavaScript om te laten weten dat alles goed is verlopen.

tenslotte

Nu we hebben wat we nodig hebben, om de positiecoördinaten van ons element te pakken en door te geven aan PHP voor opslag, moeten we onze HTML aanpassen om de positie van ons element weer te geven. Om dit te doen veranderen we de HTML van het basiselement en maken in plaats daarvan het met PHP:

 
 Verplaats de doos
'; ?>