拖放后，jQuery draggable元素与可调整大小的父级分离

Question

我有这个：

list

并使用以下标记将标记添加到图像中

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

我需要将#selected_picture与所有引脚一起缩放，以便它们保持在相同的相对位置（点击图像上的点）。

上述工作正常，可以通过引脚调整包装大小，但只能拖动任何引脚。拖动引脚后，它们会与母版分离并保持固定位置，无论调整包装的大小。

如何在拖动后将它们粘贴到父包装器上？

请参阅小提琴FYI：https://jsfiddle.net/linuxoid/9w4y2cyp/

[解决]

拖动停止后，位置设置为'px'，因此为了使其可以再次调整大小，我必须将'px'转换为'％'：

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