JSFiddle - React, Tailwind, and code Playground

by blineberry

HTML

<div id="container">
    <div class="moveable"></div>
    <p class="instructions">Drag the red box</p>
</div>

CSS

html, body, #container {
    width: 100%;
    height: 100%;
    
    background: gray;
}

.moveable {
    height: 100px;
    width: 100px;
    
    background: red;
    
    position: relative;
    cursor: move;
}
.moveable:active, .moveable:focus {
    cursor: move;
}

.instructions {
    padding-top: 45%;

    text-align: center;    
    color: #555;
    text-transform: uppercase;
    font-family: sans-serif;
    font-weight: bold;
}

JavaScript

$('.moveable').on('mousedown touchstart', function(e) {
    e.originalEvent.preventDefault();
    
    
    
    var moveable = $(this);
    var start = {
        clickX: e.clientX,
        clickY: e.clientY,
        itemLeft: moveable.position().left,
        itemTop: moveable.position().top
    };
    
    switch (e.type) {
        case 'mousedown':
            start.clickX = e.clientX;
            start.clickY = e.clientY;
            break;
        case 'touchstart':
            //console.log(e);
            start.clickX = e.originalEvent.targetTouches[0].clientX;
            start.clickY = e.originalEvent.targetTouches[0].clientY;
            start.touchID = e.originalEvent.targetTouches[0].identifier;
            break;
        default:
            break;
    }
    
    switch (moveable.css('position')) {
        case 'absolute':
        case 'fixed':
            moveable.css({
                'left': start.itemLeft,
                'top': start.itemTop,
                'bottom': 'auto',
                'right': 'auto'
            });
            break;
        case 'static':
            moveable.css('position', 'relative');
        case 'relative':
            var left = moveable.css('left');
            var right = moveable.css('right');
            var top = moveable.css('top');
            var bottom = moveable.css('bottom');
            var direction = moveable.css('direction');
            
            if (direction === 'ltr') {
                if (left !== 'auto') {
                    left = parseInt(left, 10);
                }
                else if (right !== 'auto') {
                    left = - parseInt(right, 10);
                }
                else {
                    left = 0;
                }
            }
            else {
                if (right !== 'auto') {
                    left = - parseInt(right, 10);
                }
                else if (left !== 'auto') {
                    left = parseInt(left, 10);
            ...