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
J’aimerai savoir (l’exemple 3b) comment faire en sorte que les éléments qui ont pour class "exeception" ne puissent pas posséder l’effet du drag and drop ?
En effet si dans notre div, on a un champ input (par exemple) eh bien on ne peut pas remplir ce champs.
Sinon c’est un très bon tuto 😛
Tous simplement, comment faire une fonction qui mettent fin à "Drag.init" ?
je vais faire un onclick="stop_Drag();"
Mais comment faire ?
Je n’ai pu faire fonctionner cette application qu’en remplaçant 200 par 0 (au niveau du test sur xhr2.status)
Ensuite, impeccable.
(Je parle de l’exemple 2c)
C’est super mais ça ne fait pas un vrai iframe.
Je dois avoir un index avec un autre fichier en iframe ou include qui lui seul se charge quand je clique sur un élément du conteneur.