<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+=''}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.