Tengo un conjunto de divs que necesito poder arrastrar/intercambiar entre sí. Quiero poder intercambiar los divs externos entre sí, así como los divs que están anidados dentro de los divs externos. Pude lograr intercambiar los divs externos entre sí, pero no puedo hacer que los divs internos se intercambien. A continuación se muestra el Codepen. Buscando ayuda para actualizar este código para que funcione para los divs internos. 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>