<div class="cible" ondrop="relache(event)" ondragover="survole(event)"></div>
<p draggable="true" id="mov" ondragstart="glisse(event)"  type="button" value="">déplacez-moi vers jaune </p>
div{
  width: 300px;
  height: 100px;
  background-color: yellow;
}
p{
  display:block;
  width: 200px;
  height: 50px;
  background-color: orange;
  border: 1px solid silver;
  text-align: center;
  line-height: 50px;
}
function survole(e)
{
e.preventDefault();
}

function glisse(e)
{
e.dataTransfer.setData("Text",e.target.id);
}

function relache(e)
{
e.preventDefault();
var data = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(data));
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.