Focus a certain part of the image

Question

I have created a draggable image within a div using jQueryUI Draggable. I want to focus on a specific area of the draggable image using a button, which has the coordinates of the specific area data-coord. Any suggestions?

$("#inner").draggable({
  containment: $('#content')
});

#wrapper {
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

#content {
  position: absolute;
  top: -4252px;
  left: -3600px;
  width: 7600px;
  height: 8904px;
}

#inner {
  position: absolute;
  width: 4000px;
  height: 4652px;
  top: 4252px;
  left: 3600px;
}

#getArea {
  margin: 10px 0;
  padding: 5px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<button id="getArea" data-coord="">getArea</button>
<div id="wrapper">
  <div id="content">
    <img id="inner" alt="" src="https://i.ibb.co/PjFTv6N/MVIII07042020-ICONS-HIGH-RES-2.jpg" />
  </div>
</div>

jsFiddle

Answer 1

The draggable library simply puts an absolutely positioned element within one which has overflow: hidden set on it. As such you can simply animate the left and top positions of #inner when the button is clicked to move it in to the necessary position. Try this:

let $inner = $("#inner").draggable({
  containment: $('#content')
});

$('#getArea').on('click', function() {
  $inner.animate({
    left: 2675,
    top: 3235
  });
});

#wrapper {
  width: 400px;
  height: 400px;
  overflow: hidden;
  position: relative;
}

#content {
  position: absolute;
  top: -4252px;
  left: -3600px;
  width: 7600px;
  height: 8904px;
}

#inner {
  position: absolute;
  width: 4000px;
  height: 4652px;
  top: 4252px;
  left: 3600px;
}

#getArea {
  margin: 10px 0;
  padding: 5px;
}

<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<button id="getArea" data-coord="">getArea</button>
<div id="wrapper">
  <div id="content">
    <img id="inner" alt="" src="https://i.ibb.co/PjFTv6N/MVIII07042020-ICONS-HIGH-RES-2.jpg" />
  </div>
</div>