Enkel Draggable Element Persistence med jQuery

Vid något tillfälle kan du behöva skapa ett dragbart element i din webbapplikation. Det här är en bra funktionalitet, men du kanske vill eller finner att du behöver elementet för att stanna kvar på plats efter att ha dragits runt. I denna handledning kommer jag att visa dig hur du enkelt kan dra ett element och få det att hålla fast, även efter en sida omladdning, genom att ta tag i och lagra dess X- och Y-koordinater.

Scenario

Så du har ett element i din webbapplikation. Du kan dra den runt, sätt den här och lägg den där. Men när sidan laddas på något sätt återgår elementet till sin standardposition. Medan du vill att elementet ska kunna dragas, vill du inte att det ska röra sig efter att det har dragits. Låt oss titta på en enkel lösning för att ge oss denna förmåga.

Komma igång

För denna handledning behöver vi jQuery-biblioteket, jQuery-användargränssnittet och jQuery-JSON-plugin av Brantley Harris. Vi kommer också att använda någon PHP och en MySQL-databas för att analysera och lagra våra data. Om din nya till jQuery, inga bekymmer. jQuery är ett mycket extensibelt, snabbt och lättviktigt JavaScript-bibliotek som är både roligt och lätt att använda. Biblioteket har mycket snyggt strukturerad dokumentation och ett stort samhälle. Detta är min första handledning på jQuery och JavaScript, så var vänlig bära med mig. Jag hoppas att förklara allt så bra som möjligt, och om du har några frågor, var snäll och fråga.

HTML amd CSS

Jag ville börja med HTML och styling för denna handledning eftersom effekten är tillämpad på HTML-element, det hjälper till att visualisera vad vi ska göra, precis utanför flaggan. Först CSS:

 html, kropp bakgrund: # 151515; marginal: 0 0 0 0; vaddering: 0 0 0 0;  #glassbox bakgrund: # 333; gränsen: 1px solid # 000; höjd: 400px; marginal: 30px auto auto auto; positioner: relativ; bredd: 960 x; -moz-gränsen-radien: 10px; -webkit-gräns-radie: 10px;  #element bakgrund: # 666; gränsen: 1px # 000 fast; markör: Flytta; höjd: 143px; vaddering: 10px 10px 10px 10px; bredd: 202px; -moz-gränsen-radien: 10px; -webkit-gräns-radie: 10px;  #respond color: #fff; marginal: 0 auto 0 auto; bredd: 960 x; 

CSS är väldigt enkelt. Vi ställer in html- och kroppsegenskaperna för att rensa marginaler och vadderingar, och fortsätt genom att ställa in några höjder, bredder och andra egenskaper till våra element så det ser inte så blid ut. -moz-gränsen-radien och -webkit-gränsen-radien är två egenskaper som gör att vi kan skapa avrundade gränser (gäller endast Mozilla Firefox och Safari 3 för tillfället) för våra element. Låt oss ta en titt på HTML:

            
 
Flytta rutan
 
 

Som du kan se installerar vi en mycket fin och enkel sida som samtalar i vårt CSS, JavaScript-bibliotek och plugins, och innehåller de element som vi ska använda för att tillämpa några effekter och händelser till. Som en anteckning är jquery-ui-filen en anpassad konstruktion som endast innehåller kärnan och den draagbara interaktionsfunktionaliteten.

Javascript

Nu för lite saftig interaktion! Låt oss först titta på några av de grundläggande funktionerna vi ska använda för att tillämpa några effekter på våra element. Låt oss riva ner det.

Ok nu för någon djävul! I detta stycke ska vi göra ett par saker. Först vill vi installera en tom matris och sedan få några värden att fylla i med. Genom att ringa händelsehanteraren .mouseup () berättar vi webbläsaren att leta efter händelsen när du klickar på musen. Vi ställer in variabla koordinater som liknar vår tomma array, och ställer in variabelkoordinaten igen så att den motsvarar positionshanteraren för vårt #element. Då måste vi skapa en lista med objekt, dessa kommer att vara coordTop: och coordLeft: Respektivt motsvarar våra # elementets vänstra och toppositioner. Med coords.push (item) trycker vi bokstavligen vår objektlista och fyller koordinatsystemet med den. Ställ sedan in den variabla ordningen som en ny lista där koordinatsnyckeln kommer att motsvara vår samordningsgrupp. Nu för några AJAX.

$ .post är en AJAX-förfråganhanterare som laddar en avlägsen sida med en HTTP POST-metod. Den här funktionen letar efter parametrarna: url, data, återuppringning och datatyp som ska returneras. I den här handledningen anger vi uppdateringskoord.php-filen som vår URL eftersom det är här vi vill skicka vår postdata, då definierar vi vår datatyp genom att inkludera funktionen $ .toJSON definierad i vårt jquery-JSON-plugin och ange vår variabla ordning som de data som ska hanteras av .toJSON. Därefter skapar vi en återuppringning som kontrollerar ett returrespons från vår PHP-fil efter framgång och lägger till lite smak genom att säga, "Om vad som returneras är lika med framgång då ..." Vi håller den här html gömd genom att använda effekthanteraren. , och berätta att den blekna i 1000 millisekunder, vänta med en timeout i 2000 millisekunder och berätta att den bleknade ut igen. I slutet skulle vår JavaScript se så här ut:

Placera JavaScript under HTML, precis efter stängningskroppen.

PHP

Okej, nu kan vi göra affärer på att göra något med de uppgifter som publiceras från vår jQuery. Först låter vi skapa en enkel databas för att lagra våra koordinater, vilket vi senare kommer att hämta för att definiera positionen för vårt element. För det andra blir vår config.php-fil som lagrar våra inställningar för databasanslutning, och sedan slutar vi med updatecords.php.

 Databas: 'xycoords' SKAPA TABELL OM INTE EXISTERAR 'koordinater' ('id' int (11) INTE NULL AUTO_INCREMENT, 'x_pos' int (4) INTE NULL, 'y_pos' int (4) INTE NULL, PRIMÄR KEY ')) MOTOR = MyISAM DEFAULT CHARSET = latin1;

config.php

updatecoords.php

 koordinat som $ item) // Extract X-nummer för panel $ coord_X = preg_replace ('/ [^ \ d \ s] /', ', $ item-> coordTop); // Extrakt Y-nummer för panelen $ coord_Y = preg_replace ('/ [^ \ d \ s] /', ", $ item-> coordLeft); // fly våra värden - som god praxis $ x_coord = mysqli_real_escape_string ($ link, $ coord_X); $ y_coord = mysqli_real_escape_string ($ länk, $ koord_Y); // Ange vår fråga $ sql = "UPDATE koordinater SET x_pos = '$ x_coord', y_pos = '$ y_coord'"; // Utför vår fråga mysqli_query ($ link, $ sql) eller dö ("Error updating Coords:". Mysqli_error ());  // Return Success Echo "Success"; ?>

Det här är ganska enkelt att följa. Det första vi vill göra är att kontrollera att våra postdata skickas till filen. Om det händer inkluderar vi vår config-fil för vår databasanslutning och ställer variabeln $ data till json_decode (passerad postvariabel); json_decode är en PHP-funktion som implementeras i PHP 5.2.0, vilket gör att vi kan avkoda en JSON-sträng.

Eftersom vår $ data variabel innehåller en uppsättning data måste vi riva det för att få de värden vi behöver. För att göra detta tar vi förhand $ data-> koordinater (som är från vår ordervariabel i JavaScript) som ett objekt. Detta tar varje nyckel och värdet par och skapar ett objektobjekt från arrayen, då specificerar vi och skapar en variabel ur den. Vi använder detta i samband med preg_replace så att vi kan ta bort de tecken vi inte behöver. Vi, då, som en bra övning och ett mått på säkerhet, undviker våra värderingar för att förbereda dem för införande i databasen. Om allt går bra måste vi återvända till framgång för vår JavaScript för att låta det veta allt gick bra.

Slutligen

Nu när vi har vad vi behöver på plats, för att ta positionen koordinater från vårt element och skicka den till PHP för lagring, måste vi ändra vår HTML för att återspegla vårt elements position. För att göra detta ändrar vi grundelementet HTML och skapar istället det med PHP:

 
 Flytta rutan
'; ?>