JSFiddle - React, Tailwind, and code Playground

by Darby Rathbone

HTML

<div class='block' draggable>test</div><div class='block' draggable>test</div><div class='block' draggable>test</div><div class='block' draggable>test</div><div class='block' draggable>test</div><div class='block' draggable>test</div>

CSS

html, body {
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
}
.block {
    border: 2px solid;
    border-radius: 20px 20px 0px 0px;
    background-color:yellow;
    display:inline-block;
    padding:0px 50px 0px 30px;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    position:absolute;
}

JavaScript

var dragging,
toBottom = function (fun) {
    var hidden = [];
    return [].map.call(document.querySelectorAll('*:hover'), fun).pop();
},
isDraggable = function (e) {
    return e.hasAttribute('draggable') ? e : false;
},
lock = function (e) {
    if (e) {
        var pos = e.getBoundingClientRect();
        reflow(e, {

                transform: '',
                top: pos.top + "px",
                left: pos.left + "px"
            
        });

    }},
    reflow = (function () {
        var tempdoc = document.createDocumentFragment();
        return function (f, s) {
            if (f) {
                Object.keys(s).forEach(function (e) {
                    f.style[e] = s[e];
                });

            }
        };
    })()
    addEventListener('mousedown', function (e) {
        dragging = toBottom(isDraggable);
        if(dragging){
            var pos = dragging.getBoundingClientRect();
        dragging.style.left = (pos.left-e.pageX )+"px";
        dragging.style.top = (pos.top-e.pageY )+"px";
             dragging.style.transform = 'translate(' + (e.pageX) + 'px,' + (e.pageY) + 'px)';
        }

    });
    addEventListener('mousemove', function (e) {
        if (dragging) {
            dragging.style.transform = 'translate(' + (e.pageX) + 'px,' + (e.pageY) + 'px)';
        }
    });
    addEventListener('mouseup', function (e) {
        lock(dragging)
        dragging = false;
    });
    addEventListener('mouseleave', function (e) {
        lock(dragging)
        dragging = false;
    });