JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://taye.me/interact.js/interact.js"></script>
<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;
}
p {
    padding: 20px;
}

JavaScript

var box = document.getElementById('box'),
    container = document.getElementById('container');

// make an Interactable of the box
interact(box)
// make a draggable of the Interactable
.draggable(true)
.on('dragmove', function (event) {
    event.target.x |= 0;
    event.target.y |= 0;
    
    event.target.x += event.dx,
        event.target.y += event.dy;
    
    // translate the element by the change in pointer position
    event.target.style[transformProp] =
        'translate(' + event.target.x + 'px, ' + event.target.y + 'px)';
});

// Then to make #container a dropzone dropzone:
interact('#container')      // or interact(document.getElementById('container'))
.dropzone(true)
.on('drop', function (event) {
    // target is the dropzone, relatedTarget was dropped into target
    
    event.relatedTarget.x = 0;
    event.relatedTarget.y = 0;
    event.relatedTarget.style[transformProp] = '';
    
    var siblings = container.querySelectorAll('p'),
        len = siblings.length;
    
    for (var i = 0; i < len; i++) {
        var rect = interact(siblings[i]).getRect();
        
        if (event.pageY < rect.top) {
            return siblings[i].parentNode
            .insertBefore(event.relatedTarget, siblings[i]);
        }
    }
    
    return container.appendChild(event.relatedTarget);
});

// CSS transform vendor prefixes
transformProp = 'transform' in document.body.style ?
    'transform' : 'webkitTransform' in document.body.style ?
    'webkitTransform' : 'mozTransform' in document.body.style ?
    'mozTransform' : 'oTransform' in document.body.style ?
    'oTransform' : 'msTransform';