JSFiddle - React, Tailwind, and code Playground

by Ulrich Bangert

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <div id="wrapper">
        <img
            src="http://webentwicklung.ulrichbangert.de/images/2016-06-05_WolfenbĂĽttel_Bankplatz_Panorama_stitch_PSE14.jpg">
    </div>

CSS

body {
            margin: 0;
        }

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

JavaScript

var himg = $("#wrapper img").height(),
                wimg = $("#wrapper img").width(),
                hwrapper = $("#wrapper").height(),
                wwrapper = $("#wrapper").width(),
                x1 = -(wimg - wwrapper),
                x2 = 0,
                y1 = -(himg - hwrapper),
                y2 = 0;
            $("#wrapper img").draggable({
                containment: [x1, y1, x2, y2]
            });