Comment faire du drag and drop avec jQuery ? [partie1 draggable]


Faire glisser des images ou des objets d’un emplacement de l’écran vers un autre est le principe du drag and drop ou glisser déposer. Avec jQuery, le Drag&Drop devient un un jeu d’enfant.

drag and drop

1. Installer jQuery et jQuery UI.

Avant de pouvoir faire du drag and drop, il faut avoir installé jQuery. Pour cela, le plus simple est d’ajouter les snipets (bouts de codes) ressemblant à ceux ci-dessous, en allant sur https://developers.google.com/speed/libraries/. Ne prenez directement ceux de cette page, car ils sont anciens.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js">
</script>

Collez ces codes dans votre page en haut ou en bas de page. Le bas de page, rend l’affichage de la page plus rapide. Pour un document wordpress, reportez-vous à cet article : Comment installer jQuery sur WordPress ?

2. Identifier les images déplaçables.

Pour pouvoir déplacer une image à la souris, il faut que le navigateur par l’intermédiaire de jQuery, identifie les images déplaçables de celles qui ne le seront pas. Pour marquer les images, on utilise des sélecteurs de type « class ».

Par exemple pour une image :

<img src="http://adresse/image.jpg" class ="bouger" />

Bien évidemment, il faut remplacer l’adresse du lien par celle de l’image à déplacer.

3. Le Script jQuery.

Pour le script  jQuery drag&drop, on utilise la méthode draggable. ce qui donne :

<script>
$(".bouger").draggable() ;
</script>

Vous remarquez la présence de « . » (point) devant l’identificatur « bouger ».

Il est conseillé de mettre les codes dans cet ordre. d’abord l’image, puis le script jQuery.

Et c’est tout ! Simple non ?

Dans certains cas, des bugs apparaissent sous FireFox.

4. Application du drag&drop : un dolls maker.

Les dolls maker consiste à habiller sa poupée personnelle à partir des vêtements proposés par drag&drop. Dans cet exemple, tous les attributs et les liens ajoutés par WordPress aux images ont été enlevé. En particulier, le sélecteur class a été modifier en ajoutant bouger par exemple pour rendre les images déplaçable par drag and drop.

Il suffit de déplacer les vêtements sur le mannequin et faire une impression d’écran pour obtenir la poupée de vos rêves ou presque 🙂

   

 Le mannequin à habiller

manequin dolls drag&drop

5. Les principales options de draggable()

Les options du tableau sont à placer entre les parenthèses de la fonction draggable

{containment: »parent »}l’élément ne peut pas être déplacé en dehors de la surface de son élément parent.

{axis: »y »} déplacement vertical selon y uniquement possible
{axis: »x »} déplacement horizontal selon x uniquement possible
{revert:true} L’élément revient à sa position initiale lorsqu’il est laché
  {containment: »#element »} l’élément ne peut pas être déplacé en dehors de la surface de « element ».
  {distance:40} le déplacement est possible si la souris s’est déplacée d’au moins 40 pixels
  {delay:523} Le déplacement est possible après 523 millisecondes.
  {grid:[150,10]} Le déplacement ne peut se faire que dans une grille de 150pixels sur 10pixels
  {snap: »#elementCible »} Si l’élément déplacé s’approche de l’élément cible, alors il s’accrochera à ses bordures
   {snap: »#elementCible »snapMode: »outer »} Si l’élément déplacé s’approche de l’élément cible, alors il s’accrochera à ses bordures. outer, à la bordure externe  inner, à la bordure interne ; both, aux deux.
  {snap: »#elementCible »,snapTolerance:33px} L’élément s’accrochera à la bordure, s’in s’est approché de 33 pixels de la cible
  {helper: »clone »,opacity:0.7} L’élément déplacé sera cloné (copié) à l’emplacement initial et l’opacité de l’élément déplacé sera de 70%
  {cursor: »move »} change le curseur de la souris.
  {cursorAt:{top:-10,left:-10}} Le curseur se trouvera à 10 pixels en haut et à gauche du coin supérieur gauche lors du déplacement.

Toutes ce options peuvent se combiner entre elles offrant beaucoup de possibilités.

Un exemple de drag&drop possible uniquement horizontalement :

Un la même chose cette fois verticalement :

Voilà, je pense que le sujet a été bien dégrossi.

La partie 2 de cet article traite de la fonction droppable jQuery, pour déposer les images à un endroit précis.

N’hésitez pas à donner votre avis sur ce petit tuto drag&drop jQuery ou apporter des précisions. A bientôt.



En relation avec cet article

3 Comments

Add a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Lire plus :
tasse 3D
Le meilleur logiciel pour créer des anaglyphes 3D

Vous aimez la 3D et vous aimeriez créer des images en trois dimensions époustouflantes à regarder avec des lunettes. Vous...

geolocalisation
Localisation IP : 4 Widgets et 8 sites.

L'adresse IP (Internet Protocol) d'un visiteur donne des informations inportantes sur le visiteur d'un site, dont la provenance. Si cette...

10 générateurs de bannières images

Créer une bannière pour son site peut prendre du temps et demande parfois des connaissances en informatiques. Les bannières animées...

Fermer