Перетаскиваемый элемент jQuery отсоединяется от изменяемого размера родителя после перетаскивания.

Question

У меня есть это:

<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);
});