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.

<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>

Il faut coller ces codes dans votre page. On conseil souvent de les mettre entre les balises <head> et </head>, mais ce n’est pas une obligation.  Sous WordPress, on peut le mettre dans le fichier single.php par exemple. à partir du panneau d’administration WordPress apparence>éditeur>single.php ou utilisez un plugins comme Post Layout Pro.

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.

Les recherches qui vous ont mené ici

  • drag and drop jquery (3)
  • drag and drop jqry (2)
  • jquery deplacer div souris (2)
Ces articles pourraient vous intéresser :
3 Comments

Add a Comment

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

Lire plus :
filezilla
5 clients FTP gratuits pour charger vos fichiers sur le serveur

Si vous avez un hébergement mutualisé, votre hébergeur vous propose peut-être un système pour uploader (charger) vos fichiers sur le...

sauvegarde-wordpress
Comment sauvegarder et réinstaller un blog wordpress intégralement ?

Si vous possédez un blog Wordpress, vous n'êtes pas à l'abri d'un piratage ou peut-être avez-vous envie de changer d'hébergeur....

BD toondoos
Les meilleurs sites pour créer des BD en ligne.

Dans cet article, nous allons voir les meilleurs sites pour créer des BD en ligne sans savoir dessiner et sans...

Fermer