JSFiddle - React, Tailwind, and code Playground

by kailash19

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<div class="container">

    <div id="screen">
        <img src="http://www.freeimagehosting.net/newuploads/ve8z4.jpg" class="drag-image" id="draggable"/>
    </div>
    <div id="bg">
        <img src="http://www.freeimagehosting.net/newuploads/rujtk.png"/>
    </div>
<div id="slider"></div>
</div>

CSS

.container {
    margin-top: 50px;
}
.drag-image{
}
#bg, #bg > img{
    position:absolute;
    left:0px;
    top:0px;
    cursor:move;
}
#screen {
    overflow:hidden;
    left:150px;
    top:150px;
    width:300px;
    height:300px;
    clear:both;
    border:1px solid black;
    position:absolute;
    z-index:1;
}

JavaScript

$(document).click(function(e) {
    console.log(e.pageX, e.pageY)
});
$(function() {
    //$('#draggable').draggable({ containment: '.container', scroll: false , revert: 'invalid', cursor:'move'});  
    //$("#draggable").draggable();

    var pic_real_width;
    var pic_real_height;
    var fac_height = 1;
    var fac_width = 1;
    $("#draggable").each(function() {
        var pic = $( this );

        pic_real_width = pic.width();
        pic_real_height = pic.height();
        if(pic_real_height > pic_real_width) {
            fac_height = (pic_real_height/pic_real_width).toFixed(2);
        }
        else {
            fac_width = (pic_real_width/pic_real_height).toFixed(2);
        }
            
        alert(pic_real_width+","+pic_real_height+","+fac_height+","+fac_width);

    });
    
    $('#slider').slider({
        range: "max",
        orientation: "vertical",
        min: 0,
        max: 500,
        step: 10,
        slide: function(event, ui) {
            var newWidth = pic_real_width + (ui.value*fac_width);
            var newHeight = pic_real_height + (ui.value*fac_height);
            $("#draggable").css('height', newHeight);
            $("#draggable").css('width', newWidth);
                                        
        }
    });
    
    function intersects(x, y, cx, cy, r) {
        var dx = x - cx
        var dy = y - cy
        return dx * dx + dy * dy <= r * r
    }

    $("#draggable").draggable({
        start: function(e) {
            if(!intersects(e.pageX,e.pageY,300,300,130)){
            $(document).trigger("mouseup")
            }
        },
        stop: function(ev, ui) {
            var hel = ui.helper,
                pos = ui.position;
            //horizontal
            var h = -(hel.outerHeight() - $(hel).parent().outerHeight());
            if (pos.top >= 0) {
                hel.animate({
                    top: 0
                });
            } else if (pos.top <= h) {
                hel.animate({
           ...