<input type="text" value="Changez moi de place" draggable="true" ondrag="deplace()" ondragstart="document.getElementById('info1').innerHTML='ok : '" ondragend="document.getElementById('info6').innerHTML='ok'" ondragleave="document.getElementById('info2').innerHTML='ok '" /><br><br>
<input type="text" ondragenter="document.getElementById('info4').innerHTML='ok '" ondrop="document.getElementById('info5').innerHTML='ok' " /><br>
<br>
<p>Je commence le déplacement (ondragstart) : <span id="info1"></span></p>
<p>Je quitte mon emplacement (ondragleave) :<span id="info2"></span></p>
<p>Déplacement (ondrag) : <span id="info3"></span></p>
<p>Je rentre (ondragenter) : <span id="info4"></span></p>
<p>je relache dedans (ondrop): <span id="info5"></span></p>
<p>je finis le déplacement (ondragend) : <span id="info6"> </span></p>
span{
color:red;
}
p{
margin: 0;padding: 0;
}
input{
color:green
}
bol=false;
function deplace(){
bol = !bol;
if(bol){document.getElementById('info3').innerHTML+=' .'
}else{
document.getElementById('info3').innerHTML+=''}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.