Exemple de glisser
Comment cela fonctionne-t-il ? La réponse ne vous-t-elle pas évidente ? Avec du JavaScript bien sûr !
Voyons de quelle manière nous pouvons permettre à un élément d’une page d’être déplaçable au clic d’une souris. Ici, nous employons un JavaScript de la librairie de dynamicdrive.com.
La première étape consiste à placer le script dans la tête de votre document HTML de cette manière :
<head><script type=”text/javascript” src=”dom-drag.js”></script></head>
Ensuite, il suffit d’appeler la fonction Drag.init ( ) et de l’appliquer à l’élément que vous souhaitez pouvoir glisser à l’aide de la souris. Pour cela, nous utilisons un identificateur zebulon. Voici notre page HTML très basique.
<html><head><script language=”javascript” src=”dom-drag.js”></script></head><body><img id=”zebulon” src=”image.png” style=”position: relative;” /><script type=”text/javascript”>Drag.init(document.getElementById(“zebulon”));</script></body></html>
Notez que l’élément qui nous intéresse doit être en position relative, dans le cas contraire, le JavaScript ne fonctionnera pas.
Voir l’exemple 3a – Télécharger l’exemple
Ce qui est intéressant avec ce script c’est qu’il est aussi possible de faire glisser des blocs entiers de texte. Cela fonctionne de la même manière, c’est-à-dire en attribuant un identificateur à l‘élément <div> dans le code de la page.
<html><head><script language=”javascript” src=”dom-drag.js”></script></head><body></p><p id=”cadre” style=”left:20px; top:20px;border:1px solid#333;position:relative;padding:10px;width:350px;”>Chers lecteurs de Zebulon.fr<br/>Ceci est un texte que nous glissons sur la page. Celui-cise trouve dans un DIV.</p><p><script type=”text/javascript”>Drag.init(document.getElementById(“cadre”));</script></body></html>
Quelques explications :
Ici, le DIV est identifié par cadre (ligne 4). C’est sur ce dernier que la fonction Drag.init (ligne 10) opère sa magie.
Voir l’exemple 3b – Télécharger l’exemple
Dernière mise à jour le 2 décembre 2018