JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div id="box"></div>
     <div class="draggable"> alsdf dsalf asdfsadf
    dsaf sadfldsaf sadkf sadlfsadf
    asdf safdsafdksadf sadf lasldkfjsaldf safdsa
    dfsadflsadf asdlfsafdsafdsa
    fsafdsadf safdls
    </div>
    <div class="draggable"> alsdf dsalf asdfsadf
    dsaf sadfldsaf sadkf sadlfsadf
    asdf safdsafdksadf sadf lasldkfjsaldf safdsa
    dfsadflsadf asdlfsafdsafdsa
    fsafdsadf safdls
    </div>
    <div class="draggable"> alsdf dsalf asdfsadf
    dsaf sadfldsaf sadkf sadlfsadf
    asdf safdsafdksadf sadf lasldkfjsaldf safdsa
    dfsadflsadf asdlfsafdsafdsa
    fsafdsadf safdls
    </div>
    <div class="draggable"> alsdf dsalf asdfsadf
    dsaf sadfldsaf sadkf sadlfsadf
    asdf safdsafdksadf sadf lasldkfjsaldf safdsa
    dfsadflsadf asdlfsafdsafdsa
    fsafdsadf safdls
    </div>
</div>

CSS

.container{
  width:100%;
  height:100%;    
  border:1px solid green;
}
.draggable{
 padding:10px 5px;
}
.draggable:nth-child(even){
  background:#efefef;
  border-bottom:1px solid black;
  border-top:1px solid black;
}
#box{
 height:50px;
 width:200px;
 background:red;
 cursor:move;   
}
.dragHv{
    background-color:yellow !important;
}

JavaScript

var drag = new function(){
      this.box;
      this._cnt;
      this.hvEle;
      this.trgEle;
      this.initX;
      this.initY;
      this.dragging=false;
};
$(document).on('mousedown','#box',function(){
    drag.box = $(this);  
    initX = drag.box.offset().left;
    initY = drag.box.offset().top;
    
    drag._cnt = drag.box.closest('.container');
    drag.hvEle = drag._cnt.find('.draggable');
    drag.box.css({position:"absolute"});
    
    drag.hvEle.mousemove(function(e){
        e.stopPropagation();
        drag.dragging=true;
        drag.box.css({cursor:"move"});
        drag.hvEle.removeClass('dragHv');
        drag.trgEle = $(this);
        drag.trgEle.addClass('dragHv');
        var x =  e.pageX ||e.clientX;
        var y =  e.pageY ||e.clientY;
        drag.box.css({left:x,top:y});
       
    });
    
    drag.box.mouseup(function(e){        
         drag.trgEle.append(drag.box);
        /***** You can write your required logic here to either append or
         insertBefore or insertAfter
        ****/
        drag.box.css({position:'static',cursor:"move"}); 
         drag.hvEle.unbind('mousemove');
         drag.box.unbind('mouseup');
         drag.dragging=false;
     });
});
$('.container').disableSelection();

/*****This is additional logic to make sure that element is not dropped out of the container element****/
$(document).on('mousemove','html',function(){
    if(drag.dragging){
        drag.box.css({cursor:"no-drop"});
    }
});
$(document).on('mouseup','html',function(){
    if(drag.dragging){
        drag.box.css({left:drag.initX,top:drag.initY,position:"static"});
        drag.box.css({cursor:"move"});
        drag.hvEle.unbind('mousemove');
        drag.box.unbind('mouseup');
        dragging=false;
    }
});