Want to make creations as awesome as this one?

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>