Programmation

Comment faire du drag and drop avec jQuery ? [partie 2 droppable]

, , ,

Dans un premier article, nous avons vu comment faire du drag and drop avec jQuery
Dans la partie 1, nous avons vu comment faire glisser (drag) un élément, nous allons voir dans cet article, comment le déposer (drop)

1. Les prérequis.

Tout d’abord, il faut que jQuery et jQuery-ui soit installés. Si ce n’est pas le cas, je vous invite à vous reporter au premier article : Drag and drop jQuery draggable, pour l’installer. Ensuite, il faut un script utilisant draggable pour faire glisser une image. Le script de glissé est le suivant :

1
2
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
  • Pour une image dont voici la balise :
1
<img src="https://adresse/image.jpg" class ="draggable" />
  • Pour le script  jQuery drag&drop, on utilise la méthode draggable. ce qui donne :
1
2
3
<script>
$(".draggable").draggable({revert:true,helper:"clone"}) ;
</script>

Le (revert:true) a pour effet de faire revenir l’image à sa position initiale et le helper:”clone”, de conserver l’image initiale et de régler un problème avec firefox du même coup.
Ne pas oublier  class =”draggable”.
Voilà ce que tout cela donne :

L’image revient à sa position initiale, lorsqu’on la déplace avec la souris.

2. La fonction droppable de jQuery.

L’idée du glisser-déposer est d’exécuter une action après avoir déplacé et déposé  une image dans une zone prédéfinie.
Tout cela peut paraître obscur alors prenons un exemple concrèt.
Tout d’abord, il faut définir un emplacement ou déposer l’image, par des balises <div> et </div> ainsi que des CSS qui lui sont associés entre les balises < style> et </style>, et enfin le code jQuery - JavasScript de dépôt.

  • Le code CSS pour le cadre de “dépôt” :
1
2
3
4
5
6
7
<style>
	.deposer {
		width:200px;
		height:150px; 
		border:1px solid blue;
	}
</style>
  • Le code html du cadre pour “deposer” l’image :
1
<div class="deposer" \></div>
  • La fonction jQuery droppable ajoutée au script précédent, avec une petite alerte texte pour indiquer le dépôt :
1
2
3
4
5
6
7
8
9
<script>
  $( function() {
	$(".draggable1").draggable({revert:true}) ;    // glisser
	$(".deposer").droppable({ drop:function(event, ui){   // déposer
		alert("OK, image déposée");
	 }
		});
  } );
</script>
  • Le résultat avec l’image déplaçable et le cadre de dépôt + l’alerte :
     

3. Mettre en évidence une zone de dépôt.

C’est bien de savoir déclencher une action, mais si l’utilisateur ne sait pas où il doit déposer son objet, ça ne sert pas à grand chose.
Pour indiquer à l’utilisateur, la zone de dépôt, nous allons modifier la couleur du cadre de dépôt et nous changeront encore de couleur l’objet à déposer est dans la bonne zone.
nous allons modifier l’aspect du cadre lorsqu’il prend l’image pour lui indiquer la zone ou il doit aller et modifier une seconde fois le cadre lors du survol de la zone, pour lui dire qu’il peut déposer l’image.
Enfin, on précisera que seul un type d’image n’est accepté.

La nouvelle feuille de style CSS du cadre doit contenir les trois clases suivantes :

  • La bordure initiale (.deposer),
  • la bordure activée (.zone-drop-active)
  • la bordure au survol (.zone-drop-survolee)

Voilà pour la théorie, passons à la pratique.

  • Le code CSS du cadre de dépôt :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style>

	.deposer {
		width:200px;
		height:150px;
		border:3px solid #aaaaff;
	} 
	.zone-drop-active { 
		border:3px solid #aaffaa; 
	} 
	.zone-drop-survolee {
		border:3px solid #ffaaaa;
	}
</style>
  • Cadre avec les balises <\div> ne change pas.
1
<div class="deposer" \></div>

Le script jQuery avec droppable est modifié ainsi :

1
2
3
4
5
6
7
8
9
10
11
<script>
  $( function() {
	$(".draggable2").draggable({revert:true}) ;
	$(".deposer1").droppable({ 
		accept:".draggable",
		activeClass:"zone-drop-active",
		hoverClass:"zone-drop-survolee",
		drop:function(event, ui){
		alert("OK, image déposée"); }});
  } );
</script>

Les parties en violet indiquent dans l’ordre, que la zone n’acceptera que les images dont la class est “draggable”, que le cadre prendra le style “zone-drop-active”, lorsqu’on saisit l’image et le style “zone-drop-survolee” lorsqu’on passera au dessus de la zone de dépôt.
Une petite démonstration :

     

4. Déposer l’image et afficher un texte dans la zone de dépôt.

Pour le moment, nous avons afficher une alerte, ce qui n’est pas très intéressant. D
ans cette partie, nous allons ajouter un texte et une image dans le cadre de dépôt.
Pour ce faire, il suffit d’ajouter le code HTML du texte ou de l’image à ajouter dans le cadre (<div>).
Voici le script jquery :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  $( function() {
	$(".draggable").draggable({revert:true}) ;
	$(".deposer").droppable({ 
		accept:".draggable",
		activeClass:"zone-drop-active",
		hoverClass:"zone-drop-survolee",
		drop:function(event, ui){
			$(".deposer").html("<strong><center>image déposée !</center></strong>");
			$(".deposer").append('<img src="/uploads/2013/03/voiture-dragdrop-options.png" />');
			}
		});
	  });
</script>

Les deux denières lignes sont celles ajoutées au script jQuery précédent.
La fonction append ajoute du contenu HTML dans un “conteneur”.

     

Bien sûr lorsqu’on réactualise la page, tout revient à sa position initiale.

5. Pour aller plus loin avec la fonction droppable de jQuery

D’autre fonctions peuvent remplacer la fonction drop, par exemple : over ou out.

Dans ce cas, Les actions se déclencheront au survol ou à la sortie de la zone choisie, ou les deux.

On peut lancer un appel au serveur en arrière plan (en Ajax) lors du dépôt: 
Ajax facile avec jQuery.

C’est le début de la création d’un panier virtuel.
On peut vraiment faire beaucoup de choses.
Alors bon courage et bonne créaton avec le drag and drop jQuery.

Partager