Drag and drop

Nativement, il n’existe aucune méthode pour pouvoir glisser-déplacer (faire un drag and drop d’) un élément dans une page, pour ce faire, vous devez obligatoirement charger une bibliothèque. Dans la mesure où il est vivement conseillé d’utiliser la classe TweenMax de GreenSock (pour des raisons de simplicité et de performances) pour réaliser une animation, il devient très simple de réaliser un drag and drop en téléchargeant également la bibliothèque Draggable du même développeur.

[Site officiel GreenSock] [Si Site officiel en panne]

 

Les lignes d’instructions des exemples ci-dessous vont vous être présentées ci-dessous, mais commençons par expliquer l’utilisation de la bibliothèque.

  1. Via la partie Scripts de la Bibliothèque, ajoutez la bibliothèque Draggable.min.js (qui se trouve dans le dossiersrc/minified/utils de l’archive téléchargeable ci-dessus). Bien sûr, vous avez préalablement chargé la bibliothèque GreenSock comme nous vous l’expliquons dans cette ressource.
  2. Placez un élément sur la scène.
  3. Nommez le. (ex. : balle).
  4. Sélectionnez ou gardez sélectionné ce dernier et ajoutez-lui le script ci-dessous  :
Draggable.create(sym.$("logo1"));

Comme vous pouvez le constater, la méthode est extrêmement simple car il suffit de commencer la ligne d’instruction par :

Draggable.create()

Ainsi, le programme comprend que vous souhaitez rendre un élément mobile. Il ne vous reste plus qu’à spécifier les paramètres de la méthodes create().

Le nom : il peut s’agir d’un nom d’élément, mais également d’une référence à des éléments d’une classe, etc.

Pour pouvoir spécifier d’autres paramètres, vous devez les ajouter comme deuxième argument dans une paire d’accolades.

Draggable.create(sym.$("logo1"),{paramètre:valeur,paramètre:valeur });

Ainsi dans l’exemple ci-dessous, nous contraignons le déplacement d’un élément intitulé logo2 dans un autre dont le nom est boite.

Draggable.create(sym.$("logo2"),{bounds:sym.$("boite")});

Dans cet autre exemple, on ajoute un deuxième paramètre en le séparent par une virgule.

Draggable.create(sym.$("logo2"),{bounds:sym.$("boite"),edgeResistance:0.5});

Voilà, vous savez à présent rendre un élément mobile en spécifiant également différents paramètres. Voici ceux que vous pourrez utiliser :

Rendre un élément mobile, tout simplement (comme nous venons de le voir)

Draggable.create(sym.$("logo1"));

Rendre mobiles, tous les éléments d’une classe

Draggable.create(sym.$(".petits"));

Contraindre le déplacement d’un élément dans un autre

Draggable.create(sym.$("logo2"),{bounds:sym.$("boite")});

Contraindre le déplacement d’un élément dans un autre avec une tolérance de déborder de la zone de sortie

Draggable.create(sym.$("logo2Bis"),{bounds:sym.$("boite"),edgeResistance:0.5});

Contraindre le déplacement d’un élément dans un autre avec un retour en cas de sortie de la zone

(Attention, cette option qui permet également de lancer un élément et d’obtenir un effet de ralentissement n’est disponible qu’en téléchargeant la bibliothèque ThrowPropsPlugin.min.js qui est est payante sur le site de GreenSock.

Draggable.create(sym.$("logo2Ter"),{bounds:sym.$("boite"),edgeResistance:0.5,throwProps:true});

Dans cet exemple l’élément  axeH est très large et de la même hauteur que l’élément rendu mobile, cela permet de contraindre un déplacement sur un seul axe avec des limites.

Draggable.create(sym.$("logo3"),{bounds:sym.$("axeH")});

Contraindre un déplacement horizontal

Draggable.create(sym.$("logo3Bis"),{lockAxis:true});

Contraindre un drag and drop autour d’un axe (l’origine de l’élément) pour obtenir une rotation

Draggable.create(sym.$("logo5"),{type:"rotation"});

Rendre un élément mobile, tout en exécutant du code au début du mouvement, pendant le mouvement et lorsque l’élément est relâché.

Draggable.create(sym.$("logo8"),{onDrag:afficherPosition,onDragStart:initialiserTexte,onDragEnd:finTexte});
function afficherPosition() {
sym.$("affichage").text(sym.$("logo8").offset().left+" "+sym.$("logo8").offset().top);
}
function initialiserTexte() {
sym.$("affichage").css({color:"red"});
}
function finTexte() {
sym.$("affichage").css({color:"black"});
}

Et pour terminer, ce script permet de connaitre la valeur de l’angle de rotation durant le mouvement.

var monLogo = Draggable.create(sym.$("logo7"),{type:"rotation",throwProps:true,onDrag:tourner});
function tourner() {
   sym.$("affichageRotation").text(Math.round(monLogo[0].rotation));
}

Retrouvez les explications en anglais plus complète sur la page GreenSock dédiée.

Pour obtenir un drag and Drop avec un magnetisme, vous pouvez utilisez la bibliothèque Draggable (avec des lignes d’instructions un peu plus complexes) mais également la bibliothèque JQuery … http://jqueryui.com/draggable/#snap-to

Vous obtiendrez des lignes du type…

sym.$("balle").draggable();
sym.$("balle").draggable({ grid: [ 50, 50 ] });

Les commentaires sont clos.