I have a set of divs that i need to be draggable/swappable with one another. I want to be able to swap the outer divs with each other as well as divs which are nested inside the outer divs. I was able to achieve swapping the outer divs with each other but i'm not able to get the inner divs to swap. Below is the Codepen. Looking for help updating this code to work for the inner divs. https://codepen.io/pfbarnet/pen/QWqoyWN

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

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

function drop(ev) {
   ev.preventDefault();  
  var drop_target = ev.target;
  var drag_target_id = ev.dataTransfer.getData("text");
  var drag_target = $('#'+ drag_target_id)[0];
  var tmp = document.createElement('span');
  tmp.className='hide';
  drop_target.before(tmp);
  drag_target.before(drop_target);
  tmp.replaceWith(drag_target);
}


 <div id="drag1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">draggable container div
   
   <div id="inner-drag1" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">draggable inner div</div>
    
   <div id="inner-drag2" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">draggable inner div</div>
  
  </div>

<div id="drag2" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">draggable container div 2</div>

<div id="drag3" draggable="true" ondragstart="drag(event)" ondrop="drop(event)" ondragover="allowDrop(event)">draggabale container div 3</div></div>