Comment faire glisser et saisir des images avec JQuery UI

Nous allons montrer un exemple de comment déplacer des images sur une page Web et l'attraper dans un div, pour cela, nous allons utiliser l'interface utilisateur JQuery. Nous utiliserons déplaçable Oui dropable. Le minimum de styles sera utilisé, ce tutoriel n'a pas pour objectif d'avoir un environnement sympa pour le tester, mais plutôt de voir comment fonctionnent les fonctions commentées. Le code n'a pas de complication majeure.

Dans l'exemple nous allons avoir quelques images et un div avec une bordure, l'objectif est de déplacer chaque image vers le div et qu'elle l'attrape, nous allons voir les codes commençant par le HTML.

Code HTML

Vous apprécierez que le code HTML soit court, juste ce qu'il faut, l'essentiel du tutoriel ne se trouve pas ici.

 Glisser  

Dans la section head, nous importons le style nécessaire, le script que nous créons et les scripts JQuery UI. Dans le corps, ajoutez simplement 2 images et un div, le div a un identifiant, et les images avec une classe, afin que nous puissions les gérer dans notre script.

Code CSS

Comme nous l'avons dit au début, les styles ne sont pas une priorité, seuls ceux nécessaires à cette tâche seront utilisés.

 #frame {largeur : 270px; hauteur minimale : 60px ; marge : automatique ; bordure : 1px noir uni ; rembourrage : 5px ; } .dropped {position : statique ! important ; } 

Une bordure est ajoutée au div et il est centré, afin que nous puissions voir quand il capture l'image. La classe supprimée est rendue statique, cette partie est la plus importante, car cette classe sera ajoutée à l'image lorsqu'elle sera capturée par le div.

Code JQuery

Nous allons mettre le code ci-dessous, pour l'expliquer plus tard.

 $ (document) .ready (function () {$ (". moveImage"). draggable (); $ ("#box"). droppable ({drop: function (event, ui) {ui.draggable.addClass (" déposé "); $ (this) .append (ui.draggable);}});})

On fait la classe déplacer l'image draggable, qui est la classe ajoutée à nos images dans le HTML. Cette tâche nous permet déjà de déplacer ou de faire glisser nos images sur la page, mais seulement cela, avec ce code, il ne serait pas encore "capturé". Pour cela, nous utiliserons droppable dans le div avec id peinture, dans droppable, nous faisons en sorte que l'image située dans le div l'ajoute à la classe supprimée (rappelez-vous le CSS, sans la position statique, cela ne fonctionnerait pas bien) et plus tard, cela est ajouté en tant que contenu du div, pour cela nous utilisons append.

Nous allons maintenant tester l'exemple, dans l'image suivante, nous voyons comment la page démarre :

Le déplacement d'une image ressemblera à ceci :

Et enfin quand on aura les 2 images dans le div, la "page" ressemblera à ça :

Il est à noter qu'en fonction de la taille de la fenêtre, l'apparence variera légèrement. Jusqu'à présent, le didacticiel est arrivé, vous pouvez maintenant vous entraîner et compliquer l'exemple autant que vous le souhaitez.

NoterSi vous voulez en savoir plus sur JQuery UI, visitez leur page. Vous trouverez plus de possibilités et vous verrez des exemples.