JSFiddle - React, Tailwind, and code Playground

by nobuts

HTML

<script src="http://oneblackbear.com/draggable/jquery.draggable.js"></script>
<p>Edit Input Fields /or/ Drag Image to change Position. [by <a href="http://twitter.com/#!/mprogano/">@mprogano</a>]</p>
<br/>
<label for="top">Top:</label> <input id="top" name="top" value="-144px" /><br/>
<label for="left">Left:</label> <input id="left" name="left" value="-105px" /><br/>

<br/><br/>
<div id="draggable">
    <img src="http://cdn.hdwallpaperspics.com/uploads/2013/01/African_Sunset.jpg" />
</div>

CSS

body {
    margin:40px;
}

#draggable{
    width:300px;
    height:300px;
    border:1px solid red;
    cursor:move;
    overflow:hidden;
}
#draggable img {
    top:-111;
    left:-93;
}

JavaScript

$(function() {
    var maskWidth  = $("#draggable").width();
    var maskHeight = $("#draggable").height();
    var imgPos     = $("#draggable img").offset();
    var imgWidth   = $("#draggable img").width();
    var imgHeight  = $("#draggable img").height();
    var x1 = (imgPos.left + maskWidth) - imgWidth;
    var y1 = (imgPos.top + maskHeight) - imgHeight;
    var x2 = imgPos.left;
    var y2 = imgPos.top;    
    var posTop = $("#top").val();
    var posLeft = $("#left").val();

    $("#draggable img").css({top: posTop, left: posLeft});
    $('#draggable img').draggable({
        containment: [x1,y1,x2,y2],
        stop: function(e, ui) {
            var posTop = ui.position.top+'px';
            var posLeft = ui.position.left+'px';
            $("#top").val(posTop);
            $("#left").val(posLeft);
        }
    });

    $("#top").keyup(function () {
      var valTop = $(this).val();
        $("#draggable img").css({top: valTop});
    }).keyup();
    $("#left").keyup(function () {
        var valLeft = $(this).val();
        $("#draggable img").css({left: valLeft});
    }).keyup();
    
});