Paramètres : Droppables.add(element HTML | id, {options})
Rôle : Ajoute un droppable à la liste des droppables. C'est à dire que l'élément HTML devient réactif aux Draggables.
Retourne : -
Note :
Options accept:'nom_de_classe'|['classe1',…,'classen'] Définit quels Draggables sont acceptés par ce Droppable. Seuls les éléments ayant la/les classes spécifiés feront réagir le Droppable. containment:element|'id_de_l_element'|[element1,…,elementn] N'accepte que les Droppables contenu dans l'/les element/s. hoverclass:'nom_de_classe' Ajouteras cette classe au Droppable si un Draggable acceptable passe au dessus de lui. overlap:'horizontal'|'vertical' Le Droppable ne réagira que si le Droppable le recouvre à plus de 50% dans la direction spécifiée. greedy:true|false Lapin Compris Callback : onHover:fonction(Draggable, Droppable, Pourcentage_recouvrement) Fonction appelée lorsque un Draggable recouvre le Droppable. onDrop:fonction(Draggable, Droppable) Fonction appelée lorsqu'un Draggable est laché sur le Droppable.Exemple 1 | Exemple 2
Cliquez-glissez le calque gris sur le calque rouge.
Si le calque recouvre le calque rouge suffissament (combien ??), cela lance une fonction spécifique.
function tester()
{
new Draggable('div_2');
Droppables.add('div_1',{onDrop:afficherMessage});
function afficherMessage()
{
alert("C'est laché!");
}
}