JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
</ul>


<button type="button" id="attach">attach</button>
<button type="button" id="detach">detach</button>

CSS

ul {
    width: 300px;
    border: 3px solid #000;
    overflow: hidden;   
}

ul li {
    display: block;
    width: 30px;
    height: 30px;
    float: left;
    background: #f2d;
    border: 1px solid #f11;
    margin-right: 5px;  
}

JavaScript

var itemsContainer = $('ul');

window.detach = function() {
    itemsContainer.sortable('destroy');
}

window.attach = function() {

    itemsContainer.sortable({
        revert: 100,
        axis: 'x',
        containment: itemsContainer,
        delay: 100,
        scroll: false
    }).disableSelection();

}

$('button').click(function() {
    window[this.id]();
});





/*
 * A bridge between iPad and iPhone touch events and jquery draggable, sortable etc. mouse interactions.
 * @author Oleg Slobodskoi  
 */
/ iPad | iPhone / .test(navigator.userAgent) && (function($) {

    var proto = $.ui.mouse.prototype,
        _mouseInit = proto._mouseInit;

    $.extend(proto, {
        _mouseInit: function() {
            this.element.bind("touchstart." + this.widgetName, $.proxy(this, "_touchStart"));

            _mouseInit.apply(this, arguments);
        },

        _touchStart: function(event) {
            if (event.originalEvent.targetTouches.length != 1) {
                return false;
            }

            this.element.bind("touchmove." + this.widgetName, $.proxy(this, "_touchMove")).bind("touchend." + this.widgetName, $.proxy(this, "_touchEnd"));

            this._modifyEvent(event);

            this._mouseDown(event);

            return false;
        },

        _touchMove: function(event) {
            this._modifyEvent(event);
            this._mouseMove(event);
        },

        _touchEnd: function(event) {
            this.element.unbind("touchmove." + this.widgetName).unbind("touchend." + this.widgetName);
            this._mouseUp(event);
        },

        _modifyEvent: function(event) {
            event.which = 1;
            var target = event.originalEvent.targetTouches[0];
            event.pageX = target.clientX;
            event.pageY = target.clientY;
        }

    });

})(jQuery);