JSFiddle - React, Tailwind, and code Playground

by frapporti

HTML

<div class="draggable" data-dragDirection="horizontal">horizontal</div>
<div class="draggable" data-dragDirection="vertical">vertical</div>

<div class="draggable">both</div>

CSS

.draggable {
    height: 130px;
    width: 150px;
    background: #ccc;
    position: relative;
    cursor: pointer;
    border: 2px solid blue;
}

JavaScript

$(document).on("mousedown", ".draggable", function() {
    
    
});




var ele = $(".draggable")[0];

var initX, initY = 0, first = true, motion;

ele.addEventListener ("mousedown" , eleMouseDown , false);

function eleMouseDown () {
    stateMouseDown = true;
    document.addEventListener ("mousemove" , eleMouseMove , false);
}

function eleMouseMove (ev) {
    var pX = ev.pageX;
    var pY = ev.pageY;

    if (first) {
        initX = ev.offsetX;
        initY = ev.offsetY;
        first = false;
    }
    
    motion = 'translateX(' + Number(pX - initX) + 'px) translateY(' + Number(pY - initY) + 'px) translateZ(0)';
    
    ele.style.webkitTransform =
    ele.style.msTransform = 
    ele.style.MozTransform = motion;

    document.addEventListener ("mouseup" , eleMouseUp , false);
}

function eleMouseUp () {
    document.removeEventListener ("mousemove" , eleMouseMove , false);
    document.removeEventListener ("mouseup" , eleMouseUp , false);
    initX = initY = 0, first = true;
}