Сфокусируйте определенную часть изображения - PullRequest
Новая
       36

Сфокусируйте определенную часть изображения

1 голос
/ 08 апреля 2020

Я создал перетаскиваемое изображение в div с помощью jQueryUI Draggable. Я хочу сфокусироваться на указанной c области перетаскиваемого изображения с помощью кнопки, которая имеет координаты указанной c области data-coord. Есть предложения? 

$("#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

1 Ответ

1 голос
/ 08 апреля 2020

Перетаскиваемая библиотека просто помещает абсолютно позиционированный элемент в элемент, для которого установлена ​​overflow: hidden. Таким образом, вы можете просто анимировать позиции left и top #inner, когда кнопка нажата, чтобы переместить ее в нужное положение. Попробуйте это: 

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>
...