Persistance d'élément glissable simple avec jQuery

À un moment donné, vous devrez peut-être créer un élément déplaçable dans votre application Web. Il s’agit là d’une fonctionnalité intéressante, mais vous voudrez peut-être ou constaterez que vous avez besoin que l’élément reste en place après avoir été déplacé. Dans ce tutoriel, je vais vous montrer comment faire glisser un élément et le faire coller, même après un rechargement de page, en saisissant et en stockant ses coordonnées X et Y..

Scénario

Vous avez donc un élément dans votre application Web. Vous pouvez le faire glisser, le mettre ici et le mettre là. Cependant, lorsque la page est rechargée, l'élément revient à sa position par défaut. Bien que vous souhaitiez que l'élément puisse être déplacé, vous ne voulez pas le déplacer après l'avoir fait glisser. Regardons une solution simple pour nous donner cette capacité.

Commencer

Pour ce tutoriel, nous allons avoir besoin de la bibliothèque jQuery, de l'interface utilisateur jQuery et du plugin jQuery-JSON de Brantley Harris. Nous utiliserons également des bases de données PHP et MySQL pour analyser et stocker nos données. Si vous êtes nouveau sur jQuery, pas de souci. jQuery est une bibliothèque JavaScript hautement extensible, rapide et légère, à la fois amusante et facile à utiliser. La bibliothèque a une documentation très bien structurée et une énorme communauté. Il s’agit de mon premier tutoriel sur jQuery et JavaScript. J'espère tout expliquer du mieux que je peux et si vous avez des questions, n'hésitez pas à les poser.

Le HTML et CSS

Je voulais commencer par le code HTML et le style de ce didacticiel, car l'effet est appliqué aux éléments HTML. Il est donc utile de visualiser ce que nous allons faire dès le départ. D'abord le CSS:

 html, body background: # 151515; marge: 0 0 0 0; remplissage: 0 0 0 0;  #glassbox background: # 333; bordure: 1px solide # 000; hauteur: 400px; marge: auto auto auto 30px; position: relative; largeur: 960px; -moz-border-radius: 10px; -webkit-border-radius: 10px;  #element background: # 666; bordure: 1px # 000 solide; curseur: déplacer; hauteur: 143px; remplissage: 10px 10px 10px 10px; largeur: 202px; -moz-border-radius: 10px; -webkit-border-radius: 10px;  #respond color: #fff; marge: 0 auto 0 auto; largeur: 960px; 

Le CSS est très simple. Nous définissons les propriétés html et body pour effacer les marges et le remplissage, puis nous continuons en définissant des hauteurs, des largeurs et d'autres propriétés sur nos éléments, de manière à ce qu'ils ne semblent pas si fades. -moz-border-radius et -webkit-border-radius sont deux propriétés qui nous permettent de créer des bordures arrondies (applicables uniquement à Mozilla Firefox et Safari 3 pour le moment) pour nos éléments. Jetons un coup d'oeil au HTML:

            
 
Déplacer la boîte
 
 

Comme vous pouvez le constater, nous venons de configurer une page très simple et agréable qui appelle dans nos CSS, notre bibliothèque JavaScript et nos plugins, et contient les éléments que nous utiliserons pour appliquer certains effets et événements. A noter que le fichier jquery-ui est une construction personnalisée qui n'inclut que la fonctionnalité d'interaction glissée et principale.

Le javascript

Maintenant, pour une interaction juteuse! Voyons d’abord certaines des fonctions de base que nous utiliserons pour appliquer certains effets à nos éléments. Allons le démolir.

Ok maintenant pour un peu de diable! Dans cet extrait, nous allons faire quelques choses. Nous voulons d’abord configurer un tableau vide, puis obtenir quelques valeurs pour le remplir. En appelant le gestionnaire d'événements .mouseup (), nous demandons au navigateur de rechercher l'événement lorsque vous décliquez votre souris. Nous avons défini la variable coords égale à notre tableau vide, et à nouveau la coordonnée égale le gestionnaire de position de notre #element. Ensuite, nous devons créer une liste d'éléments, ceux-ci seront coordTop: et coordLeft: égaler respectivement les positions gauche et supérieure de notre # élément. Avec coords.push (item), nous poussons littéralement notre liste d’articles et en complétons le tableau de coords. Puis définissez l'ordre des variables comme une nouvelle liste où la clé coords sera égale à notre tableau de coords. Maintenant pour quelques AJAX.

$ .post est un gestionnaire de requêtes AJAX qui charge une page distante à l'aide d'une méthode HTTP POST. Cette fonction recherche les paramètres: url, data, callback et type de données à renvoyer. Dans ce didacticiel, nous spécifions le fichier updatecoords.php en tant qu’URL car c’est là que nous voulons envoyer nos données de publication. Nous définissons ensuite notre type de données en incluant la fonction $ .toJSON définie dans notre plugin jquery-JSON et en définissant notre ordre de variable comme les données à manipuler par .toJSON. Ensuite, nous créons un rappel qui vérifie la réponse renvoyée par notre fichier PHP en cas de succès, et ajoutons un peu de saveur en disant: "Si le résultat est égal au succès, alors ..." Nous gardons ce code HTML masqué à l'aide du gestionnaire d'effets .hide , et dites-lui de s’appliquer à 1000 millisecondes, attendez avec un délai d’attente de 2000 millisecondes et dites-lui de s’effacer à nouveau. En fin de compte notre JavaScript devrait ressembler à ceci:

Placez le JavaScript sous le code HTML, juste après la balise body fermeture.

Le PHP

Très bien, passons maintenant aux choses sérieuses avec les données publiées depuis notre jQuery. Commençons par créer une base de données simple pour stocker nos coordonnées, que nous récupérerons ensuite pour définir la position de notre élément. Deuxièmement, notre fichier config.php stockera nos paramètres de connexion à la base de données, puis nous terminerons avec updatecords.php..

 Base de données: 'xycoords' CREATE TABLE SI NON EXISTE 'coords' ('id' int (11) NON NUL AUTO_INCREMENT, 'x_pos' int (4) NON NULL, 'y_pos' int (4) NON NULL, PRIMARY KEY ('id ')) ENGINE = MyISAM DEFAULT CHARSET = latin1;

config.php

updatecoords.php

 coords as $ item) // Numéro X d'extrait pour le panneau $ coord_X = preg_replace ('/ [^ \ d \ s] /', ", $ item-> coordTop); // Numéro Y d'extrait pour le panneau $ coord_Y = preg_replace ('/ [^ \ d \ s] /', ", $ item-> coordLeft); // échapper à nos valeurs - bonne pratique $ x_coord = mysqli_real_escape_string ($ link, $ coord_X); $ y_coord = mysqli_real_escape_string ($ link, $ coord_Y); // Configurer notre requête $ sql = "UPDATE coords SET x_pos = '$ x_coord', y_pos = '$ y_coord'"; // Exécuter notre requête mysqli_query ($ link, $ sql) ou die ("Erreur lors de la mise à jour de Coords:". Mysqli_error ());  // Return Success echo "success"; ?>

C'est assez simple à suivre. La première chose à faire est de vérifier que nos données de publication sont bien transférées dans le fichier. Si cela se produit, nous incluons notre fichier de configuration pour notre connexion à la base de données et définirons la variable $ data sur json_decode (variable post passée); json_decode est une fonction PHP implémentée dans PHP 5.2.0 qui nous permet de décoder une chaîne JSON.

Puisque notre variable $ data contient un tableau de données, nous devons le séparer pour obtenir les valeurs dont nous avons besoin. Pour ce faire, nous prenons foreach $ data-> coords (qui provient de notre variable de commande dans notre code JavaScript) comme un élément. Cela prend chaque paire clé-valeur et crée un objet item à partir du tableau, puis nous spécifions et créons une variable à partir de celui-ci. Nous l'utilisons en conjonction avec preg_replace pour supprimer les caractères dont nous n'avons pas besoin. En tant que bonne pratique et mesure de sécurité, nous échappons ensuite à nos valeurs pour les préparer à leur insertion dans la base de données. Si tout se passe bien, nous devons renvoyer le succès à notre code JavaScript pour lui faire savoir que tout s'est bien passé..

enfin

Maintenant que nous avons ce dont nous avons besoin en place, pour saisir les coordonnées de position de notre élément et les transmettre à PHP pour le stockage, nous devons modifier notre code HTML afin de refléter la position de notre élément. Pour ce faire, nous modifions l'élément HTML de base et le créons avec PHP:

 
 Déplacer la boîte
'; ?>