REUTILISABLE DragAndDrop
Gaelle
Created on June 4, 2020
More creations to inspire you
SLYCE DECK
Personalized
LET’S GO TO LONDON!
Personalized
ENERGY KEY ACHIEVEMENTS
Personalized
HUMAN AND SOCIAL DEVELOPMENT KEY
Personalized
CULTURAL HERITAGE AND ART KEY ACHIEVEMENTS
Personalized
DOWNFALLL OF ARAB RULE IN AL-ANDALUS
Personalized
ABOUT THE EEA GRANTS AND NORWAY
Personalized
Transcript
version 2.1
OFF/ON 1
OFF/ON
ON/OFF 1
ON/OFF
Apparition (une fois)
Disparition(une fois)
Disparition
DND
Testez !
Réutilisez!
Apparition
version 2.1
DND
On joue sur la précision en modifiant la taille de la cible
On obtient des effets par superposition des types de réactions. Ici on/off et off/on.
Le centre de l'objet sert de repère
+
Ceci est la page pour créer votre Drag and DropPensez à activer l'option
objets à grouper chacun avec un élément Genially
Apparition
Réactions à choisir (ou pas)
Apparition une fois
Disparition
Disparition une fois
Ceci est la page pour créer votre Drag and DropPensez à activer l'option
Ceci est la page pour créer votre Drag and DropPensez à activer l'option
ANCIENNE VERSION !
Le code pour le plaisir des yeux ou pour comprendre
<div id='objet'>objet</div> <script></script>
<div id='cible'>cible</div> <script></script>
<div id="offon">OFF/ON</div> <script> clearInterval(inter); function verif() { var objet=document.getElementById('objet').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (objet.getAttribute("id")==null) { objet=document.getElementById('objet').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } var objetx = objet.offsetLeft; objetx=parseInt(objetx, 10); var objetdx = objet.getAttribute('data-x'); objetdx=parseInt(objetdx, 10); if (isNaN(objetdx)) {objetdx=0; } var objety = objet.offsetTop; objety=parseInt(objety, 10); var objetdy = objet.getAttribute('data-y'); objetdy=parseInt(objetdy, 10); if (isNaN(objetdy)) {objetdy=0; } var objetpx =(objetx+objetdx); var objetpy =(objety+objetdy); var cible=document.getElementById('cible').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (cible.getAttribute("id")==null) { cible=document.getElementById('cible').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } var ciblex = cible.offsetLeft; ciblex=parseInt(ciblex, 10); var cibledx = cible.getAttribute('data-x'); cibledx=parseInt(cibledx, 10); if (isNaN(cibledx)) {cibledx=0; } var cibley = cible.offsetTop; cibley=parseInt(cibley, 10); var cibledy = cible.getAttribute('data-y'); cibledy=parseInt(cibledy, 10); if (isNaN(cibledy)) {cibledy=0; } var ciblepx =(ciblex+cibledx); var ciblepy =(cibley+cibledy); var largc = cible.style.width; largc=eval(largc.replace("px","")); var hautc = cible.style.height; hautc=eval(hautc.replace("px","")); var largo = objet.style.width; largo=eval(largo.replace("px",""))/2; var hauto = objet.style.height; hauto=eval(hauto.replace("px",""))/2; var boite=document.getElementById('offon').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (boite.getAttribute("id")==null) { boite=document.getElementById('offon').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } if ((objetpx+largo >= ciblepx)&& (objetpx+largo <= ciblepx+largc) && (objetpy+hauto >= ciblepy) && (objetpy+hauto <= ciblepy+hautc)) { boite.style.visibility="visible"; } else { boite.style.visibility="hidden"; } } var url = window.location.pathname.split( "/" ); var refgenial= url[1]; if (refgenial!="editor") { verif(); var inter=setInterval(verif, 200); } </script>
<div id="offon1">OFF/0N1</div> <script> clearInterval(inter); function verif() { var objet=document.getElementById('objet').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (objet.getAttribute("id")==null) { objet=document.getElementById('objet').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } var objetx = objet.offsetLeft; objetx=parseInt(objetx, 10); var objetdx = objet.getAttribute('data-x'); objetdx=parseInt(objetdx, 10); if (isNaN(objetdx)) {objetdx=0; } var objety = objet.offsetTop; objety=parseInt(objety, 10); var objetdy = objet.getAttribute('data-y'); objetdy=parseInt(objetdy, 10); if (isNaN(objetdy)) {objetdy=0; } var objetpx =(objetx+objetdx); var objetpy =(objety+objetdy); var cible=document.getElementById('cible').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (cible.getAttribute("id")==null) { cible=document.getElementById('cible').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } var ciblex = cible.offsetLeft; ciblex=parseInt(ciblex, 10); var cibledx = cible.getAttribute('data-x'); cibledx=parseInt(cibledx, 10); if (isNaN(cibledx)) {cibledx=0; } var cibley = cible.offsetTop; cibley=parseInt(cibley, 10); var cibledy = cible.getAttribute('data-y'); cibledy=parseInt(cibledy, 10); if (isNaN(cibledy)) {cibledy=0; } var ciblepx =(ciblex+cibledx); var ciblepy =(cibley+cibledy); var largc = cible.style.width; largc=eval(largc.replace("px","")); var hautc = cible.style.height; hautc=eval(hautc.replace("px","")); var largo = objet.style.width; largo=eval(largo.replace("px",""))/2; var hauto = objet.style.height; hauto=eval(hauto.replace("px",""))/2; var boite=document.getElementById('offon1').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (boite.getAttribute("id")==null) { boite=document.getElementById('offon1').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } if ((objetpx+largo >= ciblepx)&& (objetpx+largo <= ciblepx+largc) && (objetpy+hauto >= ciblepy) && (objetpy+hauto <= ciblepy+hautc)) { boite.style.visibility="visible"; clearInterval(inter); } else { boite.style.visibility="hidden"; } } var url = window.location.pathname.split( "/" ); var refgenial= url[1]; if (refgenial!="editor") { verif(); var inter=setInterval(verif, 200); } </script>
<div id="onoff">ON/OFF</div> <script> clearInterval(inter); function verif() { var objet=document.getElementById('objet').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (objet.getAttribute("id")==null) { objet=document.getElementById('objet').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } var objetx = objet.offsetLeft; objetx=parseInt(objetx, 10); var objetdx = objet.getAttribute('data-x'); objetdx=parseInt(objetdx, 10); if (isNaN(objetdx)) {objetdx=0; } var objety = objet.offsetTop; objety=parseInt(objety, 10); var objetdy = objet.getAttribute('data-y'); objetdy=parseInt(objetdy, 10); if (isNaN(objetdy)) {objetdy=0; } var objetpx =(objetx+objetdx); var objetpy =(objety+objetdy); var cible=document.getElementById('cible').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (cible.getAttribute("id")==null) { cible=document.getElementById('cible').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } var ciblex = cible.offsetLeft; ciblex=parseInt(ciblex, 10); var cibledx = cible.getAttribute('data-x'); cibledx=parseInt(cibledx, 10); if (isNaN(cibledx)) {cibledx=0; } var cibley = cible.offsetTop; cibley=parseInt(cibley, 10); var cibledy = cible.getAttribute('data-y'); cibledy=parseInt(cibledy, 10); if (isNaN(cibledy)) {cibledy=0; } var ciblepx =(ciblex+cibledx); var ciblepy =(cibley+cibledy); var largc = cible.style.width; largc=eval(largc.replace("px","")); var hautc = cible.style.height; hautc=eval(hautc.replace("px","")); var largo = objet.style.width; largo=eval(largo.replace("px",""))/2; var hauto = objet.style.height; hauto=eval(hauto.replace("px",""))/2; var boite=document.getElementById('onoff').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (boite.getAttribute("id")==null) { boite=document.getElementById('onoff').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } if ((objetpx+largo >= ciblepx)&& (objetpx+largo <= ciblepx+largc) && (objetpy+hauto >= ciblepy) && (objetpy+hauto <= ciblepy+hautc)) { boite.style.visibility="hidden"; } else { boite.style.visibility="visible"; } } var url = window.location.pathname.split( "/" ); var refgenial= url[1]; if (refgenial!="editor") { verif(); var inter=setInterval(verif, 200); } </script>
<div id="onoff1">ON/0FF1</div> <script> clearInterval(inter); function verif() { var objet=document.getElementById('objet').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (objet.getAttribute("id")==null) { objet=document.getElementById('objet').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } var objetx = objet.offsetLeft; objetx=parseInt(objetx, 10); var objetdx = objet.getAttribute('data-x'); objetdx=parseInt(objetdx, 10); if (isNaN(objetdx)) {objetdx=0; } var objety = objet.offsetTop; objety=parseInt(objety, 10); var objetdy = objet.getAttribute('data-y'); objetdy=parseInt(objetdy, 10); if (isNaN(objetdy)) {objetdy=0; } var objetpx =(objetx+objetdx); var objetpy =(objety+objetdy); var cible=document.getElementById('cible').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (cible.getAttribute("id")==null) { cible=document.getElementById('cible').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } var ciblex = cible.offsetLeft; ciblex=parseInt(ciblex, 10); var cibledx = cible.getAttribute('data-x'); cibledx=parseInt(cibledx, 10); if (isNaN(cibledx)) {cibledx=0; } var cibley = cible.offsetTop; cibley=parseInt(cibley, 10); var cibledy = cible.getAttribute('data-y'); cibledy=parseInt(cibledy, 10); if (isNaN(cibledy)) {cibledy=0; } var ciblepx =(ciblex+cibledx); var ciblepy =(cibley+cibledy); var largc = cible.style.width; largc=eval(largc.replace("px","")); var hautc = cible.style.height; hautc=eval(hautc.replace("px","")); var largo = objet.style.width; largo=eval(largo.replace("px",""))/2; var hauto = objet.style.height; hauto=eval(hauto.replace("px",""))/2; var boite=document.getElementById('onoff1').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; if (boite.getAttribute("id")==null) { boite=document.getElementById('onoff1').parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode; } if ((objetpx+largo >= ciblepx)&& (objetpx+largo <= ciblepx+largc) && (objetpy+hauto >= ciblepy) && (objetpy+hauto <= ciblepy+hautc)) { boite.style.visibility="hidden"; clearInterval(inter); } else { boite.style.visibility="visible"; } } var url = window.location.pathname.split( "/" ); var refgenial= url[1]; if (refgenial!="editor") { verif(); var inter=setInterval(verif, 200); } </script>