Forums

jquery draggable element detaches from resizable parent after drag

Permalink
I place absolutely positioned elements on top of another which is resizable (similar to the add block form behavior). But the elements are also draggable.

The problem is that resizing works fine only until any draggable element is dragged. After dragging the elements, they become detached from the resizable parent and remain at fixed positions regardless of resizing the parent.

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

See the Fiddle FYI:https://jsfiddle.net/linuxoid/9w4y2cyp/...
linuxoid
 
mnakalay replied on at Permalink Reply
mnakalay
The problem is not that it's detached. Absolutely positioned elements are detached by definition.
The problem is after you drag and drop the top and left positioning is set in pixels. If you want it to retain "visual" positioning it has to be in % like you set it when adding the marker to the map.

Shouldn't this be asked on a jquery or Jquery UI forum to get the best help possible?
linuxoid replied on at Permalink Reply
linuxoid
Thanks a lot for pointing that out! Now I added this bit and it works:
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);
        });

The jQuery forum is hopeless, questions are unanswered for weeks there.
mnakalay replied on at Permalink Best Answer Reply
mnakalay
Your code could use some optimizing like so
// grab your element so you don't have to do it every time
var selectedPicture = $('#selected_picture');
pin.on('dragstop', function(e, ui){
            var $this = $(this);
            // use the function's ui parameter instead as it already has your top and left values
            // so you don't need to do the calculation with position()
            x = ((ui.position.left) / selectedPicture.width()) * 100 + "%";
            y = ((ui.position.top) / selectedPicture.height()) * 100 + "%";
            // don't call the css() function twice
            pin.css({left: x, top: y});
        });

You will have a problem later though as coordinates are from the top left corner of your pin image so the end of the pin's needle will not properly positionned as your resize your screen since the size of the pin itself is not changing. So you can either resize the pin as well or take its dimensions into account when calculating your % positionninga
linuxoid replied on at Permalink Reply
linuxoid
Maybe you can also help with this: I store the pin positions and the map image dimensions, I can't figure the mathematics of how to restore the pins on a new image after adding the block? The following calculations result in hundreds of percents:
x = ((pin_data[i].data_left) / pin_data[i].pic_width) * 100 + "%";
mnakalay replied on at Permalink Reply
mnakalay
I'm not sure, I'd have to see the rest of your code, how you store it and how you get that pin_data array
linuxoid replied on at Permalink Reply
linuxoid
I got it. I made a typo - I was reading the i'th key for the pic dimensions while they're stored in the 0'th
x = ((pin_data[i].data_left) / pin_data[0].pic_width) * 100 + "%";