У меня есть это:
<style>
#pic_wrapper{
display: block;
position: relative;
padding: 0;
}
#selected_picture img {
width: 100%;
height: auto;
}
.pin {
display: none;
position: absolute;
height: 50px;
width: 50px;
padding: 0;
margin: 0;
}
</style>
<div id="pic_wrapper">
<div id="selected_picture">
<img src="map.png" />
</div>
</div>
и добавление маркеров к изображению с помощью:
<script type="text/javascript" charset="UTF-8">
$(function(){
$('#pic_wrapper').resizable();
$('#selected_picture').on('click', function(e){
x = ((e.offsetX) / $(this).width()) * 100 + "%";
y = ((e.offsetY) / $(this).height()) * 100 + "%";
var pin = $('<div class="pin"><img class="pin-img" src="<?php echo $imgURL; ?>pin.png" /></div>');
pin.uniqueId();
$('#pic_wrapper').append(pin);
pin.draggable({containment: 'parent'});
pin.css('left', x).css('top', y).show();
Мне нужно масштабировать #selected_picture вместе со всеми выводами, чтобы они оставались нате же самые относительные положения (точки, щелкнувшие по изображению).
Вышеприведенное прекрасно работает с изменением размера обертки с помощью штифтов, но только до тех пор, пока какой-либо штифт не будет перемещен.После перетаскивания выводов они отсоединяются от родительского элемента и остаются в фиксированных положениях независимо от изменения размера оболочки.
Как я могу заставить их придерживаться родительского упаковщика после перетаскивания?
См. СкрипкуК вашему сведению: https://jsfiddle.net/linuxoid/9w4y2cyp/
[решено]
После остановки перетаскивания положение устанавливается в «px», поэтому, чтобы снова изменить его размер, мне пришлось преобразовать «px» в'%':
pin.on('dragstop', function(e){
var $this = $(this);
x = (($this.position().left) / $('#selected_picture').width()) * 100 + "%";
y = (($this.position().top) / $('#selected_picture').height()) * 100 + "%";
pin.css('left', x).css('top', y);
});