Mootools en 30 jours : jour 12 - Drag.Move

I. Introduction à Drag.Move - Glisser et déposer avec Mootools 1.2

Si vous ne l'avez pas déjà fait, assurez-vous d'avoir lu les tutoriels Mootools 1.2 précédents de notre série de 30 jours.

Bienvenue dans le Jour 12 de Mootools en 30 jours. Aujourd'hui nous allons regarder de plus près Drag.Move, une classe Mootools puissante qui vous permet d'ajouter une fonctionnalité de "glisser et déposer" (drag and drop en anglais) à votre application. Cela fonctionne comme les autres plugins que nous avons vu : vous créez votre “new” Drag.Move (nouvel objet) et le passer dans une variable. Puis vous définisssez vos options et évènements. C'est quasiment tout ce qu'il y a à faire, mais regardez bien la description des CSS spécifiques à IE dans les exemples.

II. Explications

Les bases

Drag.Move

La mise en place d'un objet drag est très facile. Regardez juste ci-dessous. Remarquez la façon dont nous avons séparé nos options Drag.Move et évènements. Drag.Move est une extension de Drag, donc il acceptera les mêmes options et évènements que ceux de Drag. Nous n'allons regarder Drag en particulier aujourd'hui, mais allons explorer quelques unes de ses options et évènements. Regardez le code ci-dessous, et lisez bien pour en apprendre les caractéristiques.

var myDrag = new Drag.Move(dragElement, {
// Options Drag.Move
droppables: dropElement,
container: dragContainer,
// Options Drag
handle: dragHandle,
// Evènements Drag.Move
// l'evenement Drag.Move passe l'élément à glisser,
// et le met dans l'élément récepteur
onDrop: function(el, dr) {
//alertera l'id de l'el à glisser dans l'élément récepteur
alert(dr.get('id'));
},
// Evenements Drag
// Les evenements Drag passent l'éléments à glisser
onComplete: function(el) {
alert(el.get('id'));
}
});

Détaillons un peu tout cela…

Les options Drag.Move

Les options Drag.Move vous permettent de définir deux éléments importants :

droppables - Définit le sélecteur des éléments récepteurs (les éléments qui seront enregistrés sur les évènements "drop")

container - Définit le conteneur de l'élément à déplacer (gardera l'élément à l'intérieur)

Définir ces options est simple:

//ici nous définissons un élément simple par son id 
var dragElement = $('drag_element');
//ici nous définissons un tableau d'éléments par classe
var dropElements = $$('.drag_element');
 
var dragContainer = $('drag_container');
//puis nous définissons notre objet Drag.Move
var myDrag = new Drag.Move(dragElement , {
// Options Drag.Move
// définit nos éléments récepteurs avec
//la variable définie avant
droppables: dropElements ,
// définit notre élément conteneur avec
// avec la variable conteneur définie avant
container: dragContainer
});

Maintenant votre élément glissable est dans un conteneur et vous avez une classe qui acceptera les glisser/déposer

Evènements Drag.Move

Les évènements vous donnent la possibilité de lancer une fonction à différents endroits, comme lorsque vous démarrez le déplacement d'un objet ou quand vous le déposez. Chaque évènement Drag.Move passera l'élément déplaçable et la destination en paramètre (tant que c'est déplaçable).

onDrop - Cela se lancera quand vous ferez glisser un élément dans un autre

onLeave - se lancera quand un élément déplaçable quittera les limites d'un élément "draggable"

onEnter - se lancera quand un élément déplaçable entrera dans un élément récepteur

Chacun de ces évènements appelera une fonction et cette fonction se lancera quand l'évènement se produira.

var dragContainer = $('drag_container');
 
var myDrag = new Drag.Move(dragElement , {
// Options Drag.Move
droppables: dropElements ,
container: dragContainer ,
// Options Drag.Move
// les fonctions Drag.Move passeront l'élément déplaçable ('el' dans ce cas)
// et l'élément récepteur avec lequel il intéragit ('dr' ici)
onDrop: function(el, dr) {
// se traduit par "si vous déposez sur un élément qui ne le permet pas"
if (!dr) {
//ne rien faire
}
// sinon (ce qui signifie que l'élément est récepteur
// faites des choses ici
else {
//ce qu'il se passe quand vous déposez sur un élément
//qui le permet
};
},
onLeave: function(el, dr) {
// se lancera quand un élément déplaçable quittera
// un élément récepteur
},
onEnter: function(el, dr) {
// se lancera dans un élément déplaçable entre dans
// un élément récepteur
}
});

Quelques options et évènements Drag

Il y a quelques options et évènements pour Drag, mais ici nous n'allons en voir que quelques unes.

snap - option

Snap vous permet de définir le nombre de pixels que l'utilisateur doit parcourir avec son curseur avant qu'un élément déplaçable ne comment à bouger. La valeur par défaut est 6, et vous pouvez mettre n'importe quel nombre ou variable qui représente un nombre. Il faut clairement rester dans les limites du raisonnable (définir snap à 1000 ne sera pas très utile), mais c'est pratique pour personnaliser l'interface utilisateur encore un peu plus.

var myDrag = new Drag.Move(dragElement , {
// Drag Options
snap: 10
});

handle - option

Handle ajoute un pointeur sur votre élément déplaçable. Le pointeur dévient le seul élément qui acceptera le ‘grab,’ vous laissant le reste des éléments pour faire d'autres choses. Pour définir un pointeur, appelez juste l'élément.

// ici nous définissons un tableau en utilisant un sélecteur de classe
// cela permettra d'ajouter facilement plusieurs handles
// si nous décidons d'avoir plusieurs éléments déplaçables

var dragHandle = $('drag_handle');
var myDrag = new Drag.Move(dragElement , {
// Drag Options
handle: dragHandle
});

onStart - évènement

On start does what it says, fires an event on the start of drag. If you have a long snap set, then this event wouldn’t fire until the mouse had gone that distance.

var myDrag = new Drag.Move(dragElement , {
// Drag Options
// Drag options will pass the dragged element as a parameter
onStart: function(el) {
// put whatever you want to happen on start in here
}
});

onDrag - évènement

Cet évènement, onDrag, se lancera en continu lorsque vous serez en train de faire glisser un élément.

var myDrag = new Drag.Move(dragElement , {
// Drag Options
// l'option Drag passera l'élément qui se déplace en paramètre
onDrag: function(el) {
// mettez ce qui doit se passer lors du déplacement ici
}
});

onComplete - évènement

Enfin, onComplete fait référence au moment où vous relâchez un élément, et se lancera que vous relâchiez l'élément dans un élément récepteur ou non.

var myDrag = new Drag.Move(dragElement , {
// Drag Options
// Les options Drag passeront l'élément qui se déplace en paramètre
onComplete: function(el) {
// mettez ce qui doit se passer après un déplacement
}
});

Exemple

Mettons tout cela ensemble de façon à mettre en évidence quand et comment se lancent les évènements, et utilisons les options qu'on a regardé plus haut pour configurer l'objet Drag.Move :

window.addEvent('domready', function() {
var dragElement = $('drag_me');
var dragContainer = $('drag_cont');
var dragHandle = $('drag_me_handle');
var dropElement = $$('.draggable');
var startEl = $('start');
var completeEl = $('complete');
var dragIndicatorEl = $('drag_ind');
var enterDrop = $('enter');
var leaveDrop = $('leave');
var dropDrop = $('drop_in_droppable');
 
var myDrag = new Drag.Move(dragElement, {
// Options Drag.Move
droppables: dropElement,
container: dragContainer,
// Options Drag
handle: dragHandle,
// Evènements Drag.Move
onDrop: function(el, dr) {
if (!dr) { }
 
else {
dropDrop.highlight('#FB911C'); //clignote orange
el.highlight('#fff'); //clignote blanc
dr.highlight('#667C4A'); //clignote vert
};
},
onLeave: function(el, dr) {
leaveDrop.highlight('#FB911C'); //clignote orange
},
onEnter: function(el, dr) {
enterDrop.highlight('#FB911C'); //clignote orange
},
// Drag Events
onStart: function(el) {
startEl.highlight('#FB911C'); //clignote orange
},
onDrag: function(el) {
dragIndicatorEl.highlight('#FB911C'); //clignote orange
},
onComplete: function(el) {
completeEl.highlight('#FB911C'); //clignote orange
}
});
});

Note sur le css: Pour que le conteneur Drag.Move s'enregistre correctement dans IE, vous devez vous assurer d'avoir bien inclus les propriétés de positionnement dans le css. La partie importante est de bien définir le conteneur avec “position: relative” et l'élément déplaçable en “position: absolute,” puis assurez-vous d'avoir défini sa position avec “left” et “top.” Ceci dit, si vous faites juste une application compatible avec les autres navigateurs qui suivent les normes, vous pouvez ignorer cette partie.

/* c'est généralement une bonne idée */
body {
margin: 0
padding: 0
}
 
/* assurez-vous que l'élément déplaçable a "position: absolute"
*/ puis que top et left sont initialement définis
#drag_me {
width: 100px
height: 100px
background-color: #333
position: absolute
top: 0
left: 0
}
 
 
#drop_here {
width: 200px
height: 200px
background-color: #eee
}
 
/* assurez-vous que le conteneur est en position relative */
#drag_cont {
background-color: #ccc
height: 600px
width: 500px
position: relative
margin-top: 100px
margin-left: 100px
}
 
 
#drag_me_handle {
width: 100%
height: auto
background-color: #666
}
 
#drag_me_handle span {
display: block
padding: 5px
}
 
 
.indicator {
width: 100%
height: auto
background-color: #0066FF
border-bottom: 1px solid #eee
}
 
.indicator span {
padding: 10px
display: block
}
 
.draggable {
width: 200px
height: 200px
background-color: blue
}

Maintenant nous préparons notre code html :


Démarrer

Déplacer

Fin

Entre dans un élément récepteur

Quitte un élément récepteur

Reçu dans un élément récepteur


pointeur


 

Démarrer
Déplacer
Fin
Entre dans un élément récepteur
Quitte un élément récepteur
Reçu dans un élément récepteur
pointeur

III. Conclusion du tutorial

Pour en savoir plus…

Voici quelques parties intéressantes de la documentation :

Télécharger un zip avec tout ce qu'il vous faut pour débuter

Il inclut le noyau mootools 1.2, la librairie mootools 1.2 more, un fichier javascript externe pour vos fonctions, un fichier css pour vos styles, et un fichier html simple. Ils contiennent l'exemple ci-dessus.

Le tutoriel de demain

Pour le Jour 13, nous allons voir l'utilisation des expressions régulières avec Mootools 1.2