JSFiddle - React, Tailwind, and code Playground

by vencs

HTML

<div style="background-color:green;position:relative;width:100px;cursor:move;color:white;" id="a">test</div>

JavaScript

function Position(x, y) {
    this.X = x ? x : 0;
    this.Y = y ? y : 0;

    this.add = function (val) {
        if (val) {
            if (!isNaN(val.X)) this.X += val.X;
            if (!isNaN(val.Y)) this.Y += val.Y;
        }
        return this;
    };

    this.subtract = function (val) {
        if (val) {
            if (!isNaN(val.X)) this.X -= val.X;
            if (!isNaN(val.Y)) this.Y -= val.Y;
        }
        return this;
    };

    this.min = function (val) {
        if (!val) return this;
        if (!isNaN(val.X)) this.X = Math.min(this.X, val.X);
        if (!isNaN(val.Y)) this.Y = Math.min(this.Y, val.Y);
        return this;
    };

    this.max = function (val) {
        if (!val) return this;
        if (!isNaN(val.X)) this.X = Math.max(this.X, val.X);
        if (!isNaN(val.Y)) this.Y = Math.max(this.Y, val.Y);

        return this;
    };

    this.apply = function (element, control) {
        if (!element) return;
        if (!isNaN(this.X)) {
            if (control && (control.orientation != 'horizontal' || this.X > control.upperLimit || this.X < control.lowerLimit)) return;
            element.style.left = this.X + 'px';
        }
        if (!isNaN(this.Y)) {
            if (control && (control.orientation != 'vertical' || this.Y > control.upperLimit || this.Y < control.lowerLimit)) return;
            element.style.top = this.Y + 'px';
        }
    };
}

function absoluteCursorPosition(e) {
    e = e || window.event;
    if (isNaN(window.scrollX)) return new Position(e.clientX + document.documentElement.scrollLeft + document.body.scrollLeft,
    e.clientY + document.documentElement.scrollTop + document.body.scrollTop);
    else return new Position(e.clientX + window.scrollX, e.clientY + window.scrollY);
}

function dragObject(element, startCallback, moveCallback, endCallback) {
    if (!element) return;

    var cursorStartPos = null;
    var elementStartPos = null;
    var dragging = false;
    var control;

   ...