JSFiddle - React, Tailwind, and code Playground

by Syden

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="wrapper">
    <br>
    <div id="myContainer" class="ui-widget">
        <div class="ui-widget-content">Turtle</div>
        <div class="ui-widget-content">Tiger</div>
        <div class="ui-widget-content">Cow</div>
        <div class="ui-widget-content">Panda</div>
        <div class="ui-widget-content">Kangoroo</div>
        <div class="ui-widget-content">Koala</div>
        <div class="ui-widget-content">Frog</div>
        <div class="ui-widget-content">Troll</div>
        <div class="ui-widget-content">Lion</div>
        <div class="ui-widget-content">Gorilla</div>
        <div class="ui-widget-content">Snake</div>
        <div class="ui-widget-content">Cougar</div>
        <div class="ui-widget-content">Duck</div>
    </div>
    <br>
</div>

CSS

#wrapper {
    height: 300px;
    overflow: auto;
}

#myContainer {
    width: 100%;
    position: relative;
    min-height: 20px;
    margin: 0;
    margin-right: 10px;
    text-align: center;
}

#myContainer div {
    margin: 0px 5px 5px 5px;
    padding: 5px;
    font-size: 1.5em;
    -ms-touch-action: none;
}

.draggedDiv {
    background-color: mediumspringgreen !important;
    color: white !important;
}

div.ui-widget-content {
    border: 2px solid violet;
}

JavaScript

$(document).ready(function() {
    init();
    $("#myContainer").sortable({
        start: function(event, ui) {
            $(ui.item).addClass("draggedDiv");
        },
        stop: function(event, ui) {
            $(ui.item).removeClass("draggedDiv");
        }
    })

    $("#myContainer").disableSelection();

    $("#myContainer").sortable("option", "axis", "y");

    $("#myContainer").sortable("option", "containment", document.getElementById("wrapper"));
});

function touchHandler(event) {
    var touch = event.changedTouches[0];

    var simulatedEvent = document.createEvent("MouseEvent");
    simulatedEvent.initMouseEvent({
            touchstart: "mousedown",
            touchmove: "mousemove",
            touchend: "mouseup"
        }[event.type], true, true, window, 1,
        touch.screenX, touch.screenY,
        touch.clientX, touch.clientY, false,
        false, false, false, 0, null);

    touch.target.dispatchEvent(simulatedEvent);
    event.preventDefault();
}

function init() {
    document.addEventListener("touchstart", touchHandler, true);
    document.addEventListener("touchmove", touchHandler, true);
    document.addEventListener("touchend", touchHandler, true);
    document.addEventListener("touchcancel", touchHandler, true);
}