jQuery UI - élément "draggable" avec options

Contrairement à l'exemple précédent, cette fois-ci nous ajoutons certains options à la fonction draggable() pour rendre l'interaction plus intéressante. Voici le résultat :

Comme vous pouvez le noter, par rapport à la fonction de base, nous avons ajouté trois comportements différents :

1. Une fois qu'on clique sur le carré, le curseur de la souris change et suggère que l'élément peut se déplacer. On utilise pour ça l'option cursor avec la valeur "move" (cette option accepte toutes les valeurs CSS valides pour déterminer la forme du curseur).
2. Le carré peut bouger exclusivement sur l'axe horizontal. On utile pour ça l'option axis avec la valeur "x".
3. Le carré ne peut pas sortir des limites du document. On utile pour ça l'option containment avec la valeur "body", c'est-à-dire dans notre cas l'élément du DOM qui joue le rôle de "conteneur".

Voici le code complet de cet exemple :

<script>
$("#redBox").draggable({
	cursor: "move",
	axis: "x",
	containment: "body"
});
</script>

MAF (23.08.2014)