Le cliquer / déplacer en JQuery UI
Cet exemple montre comment programmer un cliquer / déplacer d'objets sur une page web en utilisant les fonctions draggable et droppable de JQuery UI.
Démonstration de l'application :
Déplacez le carré jaune à l'intérieur ou à l'extérieur du carré bleu.
Objet déplaçable
Objet récepteur
Explication de cet exemple :
L'objet "déplaçable" est draggable.
L'objet récepteur (qui peut recevoir un objet draggable) est droppable.
Chacun de ces deux objets est une balise DIV dont voici le code HTML :
<div id="draggable" style="background:#FFFF99;border:2px solid #000000">
<p>Objet déplaçable </p>
</div>
<div id="droppable" style="background:#99FFFF;border:2px solid #000000">
<p>Objet récepteur </p>
</div>
Et voici le code JQuery UI gérant ces objets :
<script type="text/javascript" language="javascript">
/////////////////////////////////////////////////////////////////////////////////////
// Script utilisant JQuery UI 1.11.4
// Réalisé le 20 juillet 2015 par Jean-Christophe MICHEL
// www.gecif.net
/////////////////////////////////////////////////////////////////////////////////////
$(document).ready(function(){
// la première DIV est draggable, c'est-à-dire déplaçable :
$( "#draggable" ).draggable();
// la seconde DIV est droppable, c'est-à-dire capable de recevoir une DIV draggable :
$( "#droppable" ).droppable({
// fonction exécutée si un objet est déposé dans la DIV (en relâchant la souris) :
drop: function(event,ui) {
$(this).css("background","#FF9900").find("p").html( "Bien reçu !" );
},
// fonction exécutée si un objet entre dans la DIV (sans relâcher la souris) :
over: function(event,ui) {
$(this).css("background","#FF99FF").find("p").html("Entré !");
},
// fonction exécutée si un objet sort de la DIV :
out: function(event,ui) {
$(this).css("background","#99FFFF").find("p").html("Sorti !");
}
});
});
</script>
Les fonctions draggable et droppable de JQuery UI disposent d'un certains nombres de paramètres non détaillés ici mais bien pratiques pour réaliser certaines animations interactives (retour automatique à la position initiale, définition d'un magnétisme, etc.).
Réalisé par Jean-Christophe MICHEL
Juillet 2015