JSFiddle - React, Tailwind, and code Playground

by brightertools

HTML

<div id="viewer" class="viewer"></div>

CSS

.viewer {
    width: 50%;
    height: 500px;
    border: 1px solid black;
    position: relative;
}
.wrapper {
    overflow: hidden;
}

JavaScript

/*
 * iviewer Widget for jQuery UI
 * https://github.com/can3p/iviewer
 *
 * Copyright (c) 2009 - 2012 Dmitry Petrov
 * Dual licensed under the MIT and GPL licenses.
 *  - http://www.opensource.org/licenses/mit-license.php
 *  - http://www.gnu.org/copyleft/gpl.html
 *
 * Author: Dmitry Petrov
 * Version: 0.7.4
 */

(function ($, undefined) {

    //this code was taken from the https://github.com/furf/jquery-ui-touch-punch
    var mouseEvents = {
        touchstart: 'mousedown',
        touchmove: 'mousemove',
        touchend: 'mouseup'
    },
    gesturesSupport = 'ongesturestart' in document.createElement('div');


    /**
     * Convert a touch event to a mouse-like
     */
    function makeMouseEvent(event) {
        var touch = event.originalEvent.changedTouches[0];

        return $.extend(event, {
            type: mouseEvents[event.type],
            which: 1,
            pageX: touch.pageX,
            pageY: touch.pageY,
            screenX: touch.screenX,
            screenY: touch.screenY,
            clientX: touch.clientX,
            clientY: touch.clientY,
            isTouchEvent: true
        });
    }

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

    mouseProto._mouseInit = function () {
        var self = this;
        self._touchActive = false;

        this.element.bind('touchstart.' + this.widgetName, function (event) {
            if (gesturesSupport && event.originalEvent.touches.length > 1) {
                return;
            }
            self._touchActive = true;
            return self._mouseDown(makeMouseEvent(event));
        })

        var self = this;
        // these delegates are required to keep context
        this._mouseMoveDelegate = function (event) {
            if (gesturesSupport && event.originalEvent.touches && event.originalEvent.touches.length > 1) {
                return;
            }
            if (self._touchActive) {
                return...