Drag

by Lazaro Contreras

HTML

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
<div draggable="true" ondragstart="drag(event)" id="drag1"></div>
<div draggable="true" ondragstart="drag(event)" id="drag2"></div>
</div>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">
<div draggable="true" ondragstart="drag(event)" id="drag3"></div>
<div draggable="true" ondragstart="drag(event)" id="drag4"></div>
</div>
<div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">
<div draggable="true" ondragstart="drag(event)" id="drag5"></div>
<div draggable="true" ondragstart="drag(event)" id="drag6"></div>
</div>
<div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">
<div draggable="true" ondragstart="drag(event)" id="drag7"></div>
<div draggable="true" ondragstart="drag(event)" id="drag8"></div>
</div>

CSS

*{
  margin:0;
  padding:0;
}
#div1, #div2,#div3, #div4{
  float:left; 
  width:96px;
  height:32px;
  margin:5px;
  border:1px solid #aaaaaa;
}
#drag1, #drag2 , #drag3, #drag4,#drag5, #drag6 , #drag7, #drag8{
  position:relative;
  display:inline-block;
  left:0;
  right:0;
  float:left;
  width:32px;
  height:32px;
  overflow:hidden;
}
#drag1{
  background:red;
}
#drag2{
  background:blue;
}
#drag3{
  background:green;
}
#drag4{
  background:yellow;
}
#drag1 div, #drag2 div, #drag3 div, #drag4 div{
  position:relative;
  display:flex;
  width:16px;
  height:16px;
  overflow:hidden;
}
#drag1 div div, #drag2 div div, #drag3 div div, #drag4 div div{
  position:relative;
  width:8px;
  height:8px;
  overflow:hidden;
}
#drag1 div div div, #drag2 div div  div, #drag3 div div  div, #drag4 div div  div{
  position:absolute;
  width:4px;
  height:4px;
  overflow:hidden;
}

JavaScript

function allowDrop(ev) {
    ev.preventDefault();
}

function drag(ev) {
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    ev.target.appendChild(document.getElementById(data));
}