JSFiddle - React, Tailwind, and code Playground

by paul_herve

HTML

<div class="items">
    <div class="item" style="left:20px;top:20px">
    </div>
    <div class="item" style="left:180px;top:20px">
    </div>
    <div class="item" style="left:280px;top:20px">
    </div>
    <div class="item" style="left:20px;top:120px">
    </div>
    <div class="item" style="left:180px;top:120px">
    </div>
    <div class="item" style="left:280px;top:120px">
    </div>
    <div class="item" style="left:20px;top:220px">
    </div>
    <div class="item" style="left:180px;top:220px">
    </div>
    <div class="item" style="left:280px;top:220px">
    </div>
</div>

CSS

.items{
    width:400px;
    height:400px;
    background-color: #AABBDD;
    position: relative;
}

.item{
    height:20px;
    width:20px;            
    position: absolute;
    background-color: #DDBBAA;
}

JavaScript

/*!
 * Adaption of jQuery Draggable:
 *
 * jQuery UI Draggable @VERSION
 * http://jqueryui.com
 *
 * Copyright 2012 jQuery Foundation and other contributors
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://jquery.org/license
 *
 * http://docs.jquery.com/UI/Draggables
 *
 * Depends:
 *  jquery.ui.core.js
 *  jquery.ui.mouse.js
 *  jquery.ui.widget.js
 */
(function($, undefined) {

    $.widget("ui.traggable", $.ui.mouse, {
        version: "1",
        widgetEventPrefix: "trag",
        options: {
            addClasses: true,
            appendTo: "parent",
            axis: false,
            connectToSortable: false,
            containment: false,
            cursor: "auto",
            cursorAt: false,
            grid: false,
            handle: false,
            helper: "original",
            iframeFix: false,
            opacity: false,
            refreshPositions: false,
            revert: false,
            revertDuration: 500,
            scope: "default",
            scroll: true,
            scrollSensitivity: 20,
            scrollSpeed: 20,
            snap: false,
            snapMode: "both",
            snapTolerance: 20,
            stack: false,
            zIndex: false,
            scaledParent: false,
            z: 1
        },
        _create: function() {
            this._mouseInit();
            this.z = this.options.z;
        },

        _destroy: function() {
            this._mouseDestroy();
        },

        _mouseCapture: function(event) {
            var o = this.options;
            this.eventCurrent = {
                x: event.pageX,
                y: event.pageY
            };
            return true;
        },

        _mouseStart: function(event) {
            this.target = $(event.target).closest('.item');
            return true;
        },

        _mouseDrag: function(event) {
            var dX = event.pageX,
                dY = event.pageY,
                velX = (this.eventCurrent.x -...