I have this:

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

and append markers to the image with:

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

I need to scale the #selected_picture together with all pins so that they remain at the same relative positions (points clicked on the image).

The above works fine with resizing the wrapper with pins but only until any pin is dragged. After dragging the pins, they become detached from the parent and remain at fixed positions regardless of resizing the wrapper.

How can I make them stick to the parent wrapper after dragging?

See the Fiddle FYI: https://jsfiddle.net/linuxoid/9w4y2cyp/