как сделать чтобы мышкой можно было перетаскивать(менять местами) div Drag and Drop?

document.querySelectorAll('.drop').forEach(e => { 
  e.draggable = true; 
  e.ondragstart = e => { 
    e.dataTransfer.setData("id", e.target.id); 
    e.target.classList.add('dragging'); 
  } 
  e.ondragover = e => { 
    let old = document.querySelector('.over'); 
    old && old.classList.remove('over') 
    e.target.classList.add('over'); 
    e.preventDefault(); 
  }; 
  e.ondrop = e => { 
    let old = document.querySelector('.dragging'); 
    old && old.classList.remove('dragging') 
    old = document.querySelector('.over'); 
    old && old.classList.remove('over'); 
    let v = e.target.innerHTML; 
    let fromEl = document.querySelector('#'+e.dataTransfer.getData('id')); 
    e.target.innerHTML = fromEl.innerHTML; 
    fromEl.innerHTML = v; 
 
  }; 
})

.drop_list{ 
  width: 170px; 
} 
 
.drop{ 
  width: 50px; 
  height: 50px; 
  border:solid; 
  float: left; 
  transition:100ms; 
  text-align:center; 
   line-height: 50px; 
   font-size:30px 
} 
 
.dragging { 
  opacity:0.5; 
} 
 
.over { 
  border: solid red; 
}

<div class="drop_list"> 
<div id="c1" class="drop">1</div> 
<div id="c2" class="drop">2</div> 
<div id="c3" class="drop">3</div> 
<div id="c4" class="drop">4</div> 
<div id="c5" class="drop">5</div> 
<div id="c6" class="drop">6</div> 
</div>