Question

I’m working on a visual editor that requires elements the user can add, remove, and drag around as they like. Each element is a div made draggable with jQueryUI. New elements are appended to a parent div that represents the workspace. Each element has a button inside itself to remove it. This all works great.

The problem I’m having is that when I remove an element that was not the most recently created, all the other draggable elements change position. This seems to be caused by the draggable elements using relative positioning.

At the moment, my removal function simply calls $('#item-x').remove(). Is there another way I should be removing draggable elements?

Answer 1

Turns out this question is a duplicate of this one, but I was searching for the wrong thing.

The solution is to simply change the elements to have absolute positioning, as per the other question. I found, however, that my elements would always revert to relative positioning even when I specified in their CSS that they should be absolute, so now I do:

$('#item-x').draggable().css("position", "absolute");