JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box"></div>
<div id="container">
    <br>
        <br>
    <p style="background: white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas voluptatum voluptatem sint ipsa autem iure. Ut quasi iure voluptate unde.</p>
            
                <br>
        <br>
    <p style="background: white">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas voluptatum voluptatem sint ipsa autem iure. Ut quasi iure voluptate unde.</p>
</div>

CSS

#container {
    height: 500px;
    background: skyblue;
}

#box{
    width: 150px;
    height: 50px;
    background: red;
    position: absolute;
}

p{
    padding: 20px;
}

JavaScript

var dragging = false;
var box = document.getElementById('box');

box.addEventListener('mousedown', function(){
    dragging = true;
})

box.addEventListener('mouseup', function( e ) {
    if(!dragging) return;
    dragging = false;
    var thisEl = this;
    
    // Hide 
    this.style.display = 'none';
    
    var el = document.elementFromPoint(e.pageX, e.pageY),
        elH = el.offsetHeight,
        elT = el.offsetTop,
        step = 30;
    
    for(var i = 0; i < 15; i++ ) {
        var newEl = document.elementFromPoint(e.pageX, e.pageY + i);
        if(newEl !== el ) {
            this.style.display = 'block';
            this.style.position = 'static';
            return newEl.parentNode.insertBefore(thisEl, newEl);
        }
    }
    
    if(e.pageY < elT + (elH / 2) ) {
        el.appendChild(this);
        el.insertBefore(this, el.firstChild);
    } else {
        el.appendChild(this)
    }
    
    this.style.display = 'block';
    this.style.position = 'static';
});

box.addEventListener('mousemove', function( e ) {
    if(!dragging) return;
 
    this.style.top = e.pageY - (this.offsetHeight / 2) + 'px';
    this.style.left = e.pageX - (this.offsetWidth / 2) + 'px',
    this.style.position = 'absolute'
    
});