var imgWidth; var imgHeight; var img = new Image(); img.src = 'https://picsum.photos/860/550/?image=316'; $(img).on('load', function() { imgWidth = img.width; imgHeight = img.height; $('#image').css('background-image', 'url(' + img.src + ')'); }); var start_y; var newPos; var curPos = $('#image').css('background-position-y'); var mouseDown = false; var move = true; $('#image').mousedown( function(e) { mouseDown = true; }); $(document).mouseup( function() { mouseDown = false; $('.image').css('background-position-y', curPos) }); $('#image').mouseenter( function(e) { start_y = e.clientY; }); $(document).mousemove( function(e) { newPos = e.clientY - start_y; start_y = e.clientY;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="image"></div> <button type="button" id="save" class="modal-add-btn">Save</button>