JSFiddle - React, Tailwind, and code Playground

by Diego Vieira

HTML

<div class="ui-widget-content" style="padding:10px;">

<div class="picturecontainer" style="overflow: hidden; position: relative; width: 650px; height: 150px; border: 1px solid #888;">
    <img style="position: absolute;" class="headerimage ui-corner-all" src="http://www.animize.de/modules/users/profile/images/profileheader/header_3722386791348526090.jpg" />
    </div>

</div>

JavaScript

$(function(){
    $(".headerimage").css('cursor','s-resize');
    var y1 = $('.picturecontainer').height();
    var y2 = $('.headerimage').height();
    $(".headerimage").draggable({
                                  scroll: false,
                                  axis: "y",
                                  drag: function(event, ui) {
                                      if(ui.position.top >= 0)
                                      {
                                          ui.position.top = 0;
                                      }
                                      else if(ui.position.top <= y1 - y2)
                                      {
                                          ui.position.top = y1 - y2;
                                      }
    
            },
            stop: function(event, ui) {
            //####
                alert(ui.position.top);
        }
        });                    
});