JSFiddle - React, Tailwind, and code Playground

by tibum

HTML

<div class="outer">
    <p>Drag the pink words to match the yellow numbers:</p>
    <div class="wrapper">
        <div class="number">1</div>
        <div class="droppable">
            <div class="draggable">three</div>
        </div>
    </div>
    <div class="wrapper">
        <div class="number">2</div>
        <div class="droppable">
            <div class="draggable">one</div>
        </div>
    </div>
    <div class="wrapper">
        <div class="number">3</div>
        <div class="droppable">
            <div class="draggable">five</div>
        </div>
    </div>
    <div class="wrapper">
        <div class="number">4</div>
        <div class="droppable">
            <div class="draggable">two</div>
        </div>
    </div>
    <div class="wrapper">
        <div class="number">5</div>
        <div class="droppable">
            <div class="draggable">four</div>
        </div>
    </div>
    <hr style="clear: both" />
</div>

CSS

.number {
    width: 50px;
    background: Khaki;
    margin-bottom: 1px;
}
.draggable {
    width: 50px;
    background: Pink;
    cursor: move;
}
.droppable {

    padding: 2px;

}
.wrapper {
    width: 50px;
    height: 50px;
    float: left;
    margin: 10px;
    text-align: center;
}
.outer {
    width: 200px;
    background: PowderBlue;
}
.hoverClass {
    border: 2px solid red;
}

JavaScript

jQuery(document).ready(function ($) {
    var dragOpts = {
        zIndex: 99,
        revert: 'invalid',
        start: startDragCallback
    }
    $(".draggable").draggable(dragOpts);

    var dropOpts = {
        drop: dropCallback,
        hoverClass: 'hoverClass'
    };
    $(".droppable").droppable(dropOpts);

    function dropCallback(e, ui) {
        var $from = $(ui.draggable),
            $fromParent = $from.parent(),
            $to = $(this).children(),
            $toParent = $(this);

        window.endPos = $to.offset();

        swap($from, $from.offset(), window.endPos, 200);
        swap($to, window.endPos, window.startPos, 1000, function () {
            $toParent.html($from.css({
                position: 'relative',
                left: '',
                top: '',
                'z-index': ''
            }));
            $fromParent.html($to.css({
                position: 'relative',
                left: '',
                top: '',
                'z-index': ''
            }));
            $(".draggable").draggable(dragOpts);
            $(".droppable").droppable(dropOpts);
        });
    }

    function startDragCallback(e, ui) {
        window.startPos = $(this).offset();
    }

    function swap($el, fromPos, toPos, duration, callback) {
        $el.css('position', 'absolute')
            .css(fromPos)
            .animate(toPos, duration, function () {
            if (callback) callback();
        });
    }
});