JSFiddle - React, Tailwind, and code Playground

by Kerrick

HTML

<h1 draggable="true" id="draggable">Test</h1>

CSS

[draggable="true"] {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    /* Required to make elements draggable in old WebKit */
    -khtml-user-drag: element;
    -webkit-user-drag: element;
    cursor: move;
    background: #800;
    color: white;
}

JavaScript

function log() {
    (arguments.length == 1) ?
        console.log(arguments[0]) :
        console.log.apply(null, arguments);
}
draggable = document.getElementById('draggable');
//draggable.addEventListener('dragstart', log);
//draggable.addEventListener('drag', log);
//draggable.addEventListener('dragenter', log);
//draggable.addEventListener('dragleave', log);
//draggable.addEventListener('dragover', log);
//draggable.addEventListener('drop', log);
//draggable.addEventListener('dragend', log);
//draggable.addEventListener('dragstart', function() { this.style.opacity = 0.1; });
//draggable.addEventListener('dragend', function() { this.style.opacity = 1; });

////////////////////////////////////////////////////////

var dragging = {
    isHappening: false,
    element: null,
    startEvent: null
};

var draggableElements = document.querySelectorAll('[draggable=true]');
_.each(draggableElements, function(el) {
    el.addEventListener('dragstart', function(event) {
        dragging.isHappening = true;
        dragging.element = el;
        dragging.startEvent = event;
    });
    el.addEventListener('dragend', function(event) {
        var dragDelta = calculateDragDelta(dragging.startEvent, event);
        console.log(dragDelta);
        // Reset global dragging element
        dragging.isHappening = false;
        dragging.element = null;
        dragging.start.x = null;
        dragging.start.y = null;
    });
});


/*
 * Takes two MouseEvent objects with integer properties "x" and "y" and returns an array [x, y] of the deltas between them.
 */
function calculateDragDelta(mouseEventBegin, mouseEventEnd) {
    return [mouseEventBegin.x - mouseEventEnd.x,
            mouseEventBegin.y - mouseEventEnd.y]
}