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 et plus particulièrement la fonction draggable, c’est-à-dire glisser. Mais dans glisser-déposer, il y aussi déposer. C’est ce que nous allons voir dans cet article avec la fonction droppable.

drag and 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 :

  • Pour une image :
<img src="http://adresse/image.jpg" class ="bouger" />
  • Pour le script  jQuery drag&drop, on utilise la méthode draggable. ce qui donne :
<script>
$(".bouger").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 = »bouger ».

Voilà ce que tout cela donne :

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

2. Le principe de la fonction droppable en 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.

  • Tout d’abord, il faut définir un emplacement ou déposer l’image, par des balises <div> et </div> ainsi que des CSS que nous placerons entre des balises< style> et</style>, comme ceci :

CSS du cadre dont l’identifiant de class est « deposer »

<style>
.deposer {
width:200px;
height:150px; 
border:1px solid blue;
}
</style>

Cadre d’identifiant de class « deposer »

 <div class="deposer" ></div>
  • On ajoute ensuite la fonction droppable au script précédent, en lui demandant d’afficher une boîte avec un petit texte ( alert(« OK, image déposée »); ) lorsqu’on dépose l’image dans le cadre.
<script>
$(".bouger").draggable({revert:true}) ;
$(".deposer").droppable({
drop:function(event, ui){
alert("OK, image déposée");
 }});
</script>

Ce qui fait apparaître une boîte avec un texte lorsqu’on dépose l’image au bon endroit. Vous pouvez le tester ci-dessous.

3. Mettre en évidence la 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 guider l’utilisateur, 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 sera accepté. Voilà pour la théorie, passons à la pratique.
La nouvelle feuille de style CSS du cadre avec les trois cas. La bordure initiale (.deposer), la bordure activée (.zone-drop-active) et la bordure au survol (.zone-drop-survolee)

<style>
.deposer {
width:200px;
height:150px; 
border:1px solid blue;
}
.zone-drop-active { 
border:1px solid red; 
} 
.zone-drop-survolee {
border:1px solid #3AFF54;
}
</style>

Cadre avec les balises <div> ne change pas.

 <div class="deposer" ></div>

Le script jQuery avec droppable est modifié ainsi :

<script>
$(".bouger").draggable({revert:true}) ;
$(".deposer").droppable({ 
accept:".bouger",
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 « bouger », 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. Dans 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. Voici le script jquery :

<script>
$(".bouger").draggable({revert:true}) ;
$(".deposer").droppable({ 
accept:".bouger",
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="http://chemin_vers_image/image.jpg" />');
}});
</script>

Les parties en violet sont celles qui ont été ajoutées au script jQuery droppable précédent. La fonction append ajoute le contenu HTML à la suite de celui existant. Cela pour éviter d’effacer ce que l’on a écrit avant.

La mise en oeuvre de ce script est donnée ci-dessous.

Bien sûr lorsqu’on réactualise la page, tout revient à sa position initiale. Pour garder les modifications, il faudrait les enregistrer, soit dans une base de donnée avec php, soit sur l’ordinateur de l’utilisateur avec des cookies par exemple.

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

Pour aller plus loin, on peut par exemple remplacer drop par 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 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.

Les recherches qui vous ont mené ici

  • comment effectuer un drag avec une voiture (1)
  • garder position drag drop (1)
Ces articles pourraient vous intéresser :
7 Comments

Add a Comment

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

Lire plus :
html-en-pdf
8 sites pour convertir des pages HTML en PDF.

Convertir en ligne un site web en HTML en un fichier PDF à partir d'une adresse url, c'est possible et...

gateau-aniversaire
Candy Crush a un an comme Outils Web !

Vous prendrez bien une part ! Eh oui, le jeu légendaire Candy Crush a un an comme outils-web.fr ! Candy...

menu CSS javascript
10 effets javascript et CSS pour menus

Vous cherchez quelques petits codes pour animer vos menus et rendre vos liens textes plus funs ? Dans ce petit...

Fermer