SOURCE

var box = document.querySelectorAll('.box');
var container = document.querySelectorAll('.container')[0];
var temp = '';

for (var i = 0; i < box.length; i++) {
  box[i].ondragstart = function(e) {
    temp = this;
    e.dataTransfer.dropEffect = "copyMove";
    console.log(e.dataTransfer.types)
  }
}
container.ondragover = function(e) {
  e.preventDefault();
  container.classList.add('hover')
}
container.ondragenter = function(e) {
  e.preventDefault();
}
container.ondragleave = function(e) {
  container.classList.remove('hover')
}
container.ondrop = function(e) {
  this.appendChild(temp);
  container.classList.remove('hover')
}

<div class="container">
</div>
<div class="container">
  <div class="box" id="box" draggable="true">
  </div>
  <div class="box" draggable="true">
  </div>
  <div class="box" draggable="true">
  </div>
  <div class="box" draggable="true">
  </div>
</div>

* {
  margin: 0;
  padding: 0;
}
.container {
  width: 90%;
  min-width: 650px;
  height: 100px;
  line-height: 200px;
  background: #eee;
  border: 2px solid #333;
  border-radius: 5px;
  padding: 50px 0;
  margin: 0 auto;
  font-size: 0;
  text-align: center;
}
.container:first-child {
  margin-bottom: 30px;
}
.container.hover {
  border: 2px dashed #333;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin: 0 20px;
  background: #e3d5c6;
}