JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<script src="http://interactjs.io/js/interact.min.js"></script>
<div id="dropzone">
    <div id="blok-1" class="drag-drop">#blok 1</div>
    <div id="blok-2" class="drag-drop">#Blok 2</div>
    <div id="blok-3" class="drag-drop">#blok 3</div>
</div>

CSS

#dropzone {
    background-color: #ccc;
    border: dashed 1px #666;
    position:relative;
    height: 340px;
    width:400px;
    overflow:hidden;
    transition: background-color 0.3s;
}

.drop-target {
    background-color: #29e;
}

.drag-drop {
    position:absolute;
    background-color: #99e;
    border: solid 2px white;
    transition: background-color 0.3s;
    height: 80px;
    width: 80px;
}

.can-drop {
    background-color: #fff;
}

JavaScript

interact('.drag-drop')
    // enable draggables to be dropped into this
    .dropzone(true)
    // only accept elements matching this CSS selector
    .accept('.drag-drop')
    // listen for drop related events
    .on('dragenter', function (event) {
        var draggableElement = event.relatedTarget,
            dropzoneElement = event.target;

        // feedback the possibility of a drop
        dropzoneElement.classList.add('drop-target');
        draggableElement.classList.add('can-drop');
        draggableElement.textContent = 'Dragged in';
    })
    .on('dragleave', function (event) {
        // remove the drop feedback style
        event.target.classList.remove('drop-target');
        event.relatedTarget.classList.remove('can-drop');
        event.relatedTarget.textContent = 'Dragged out';
    })
    .on('drop', function (event) {
        event.target.classList.remove('drop-target');
        
        var target = event.target;
            target.x = (target.x|0) + event.dx;
            target.y = (target.y|0) + event.dy;
            event.relatedTarget.textContent = 'Dropped ' +
                             target.id;
        
        
    });

interact('.drag-drop')
    .draggable({
        containment: '#dropzone',
        onmove: function (event) {
            var target = event.target;

            target.x = (target.x|0) + event.dx;
            target.y = (target.y|0) + event.dy;

            target.style.webkitTransform = target.style.transform =
                'translate(' + target.x + 'px, ' + target.y + 'px)';
        }
    })
    .inertia(true)
    .restrict({ drag: 'parent' });