JSFiddle - React, Tailwind, and code Playground

by Rejith R Krishnan

HTML

<!-- html -->

    <div>
        <ul class="draggable">
            <li class="dragme">one</li>
            <li class="dragme">two</li>
            <li class="dragme">three</li>
            <li class="dragme">four</li>
            <li class="dragme">five</li>
            <li class="dragme">six</li>
        </ul>
    </div>

CSS

ul.draggable {list-style: none; }
ul.draggable li {display: block; width: 100px; height: 40px; background-color: #000; color: #fff; margin-top: 20px; text-align: center;}

JavaScript

function drags() {
            jQuery('.dragme').on('hover touchstart'function () {
                var dragContent = jQuery(this);
                jQuery(dragContent).draggable({revert: true});
            });
        }
        jQuery(document).ready(function(){
           // init();
            drags();
        });

<!-- touch functions -->

 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);
        }
     // -- call **init()** in document.ready function