html5 - CLOSED - Drag and Drop in HTML - Drop Between Boxes JavaScript -

greeting. working on slideshow creator uses html5 drag , drop api. these api have been able create grid of user uploaded images. these images can rearranged in order like, swapping 1 one. able able drop image on top of image, causing images in front of moved right.

i.e insert new image, , drop on image 5. wasnt excisting image 5 moved box 6, 6 7, 7 8, , on , forth. able insert images way, verses swapping them.. cant figure out how accomplish this. here code

   var dragsrcel = null;     var cols = document.queryselectorall('#columns .column');     [ ].foreach.call(cols, function (col) {         col.addeventlistener('dragstart', handledragstart, false);         col.addeventlistener('dragenter', handledragenter, false)         col.addeventlistener('dragover', handledragover, false);         col.addeventlistener('dragleave', handledragleave, false);         col.addeventlistener('drop', handledrop, false);         col.addeventlistener('dragend', handledragend, false);     });  function handledragstart(e) {   // target (this) element source node.   dragsrcel = this;   e.datatransfer.effectallowed = 'move';   e.datatransfer.setdata('text/html', this.innerhtml); } function handledragover(e) {   if (e.preventdefault) {     e.preventdefault(); // necessary. allows drop.   }   e.datatransfer.dropeffect = 'move';  // see section on datatransfer object.   return false; } function handledragenter(e) {   // / e.target current hover target.   this.classlist.add('over'); } function handledragleave(e) {     this.classlist.remove('over');  // / e.target previous target element. } function handledrop(e) {     // this/e.target current target element.      if (e.stoppropagation) {         e.stoppropagation(); // stops browsers redirecting.     }      // don't if dropping same column we're dragging.     if (dragsrcel != this) {         // set source column's html html of column dropped on.         dragsrcel.innerhtml = this.innerhtml;         this.innerhtml = e.datatransfer.getdata('text/html');     }      return false; }  function handledragend(e) {   // this/e.target source node.    [].foreach.call(cols, function (col) {       col.classlist.remove('over');   }); } 

if has experience this, or words of wisdom grateful.

****closed***** switched away html5 drag. waste.