Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jquery UI Draggable Absolute Instead of Relative?

I have a div containing a few jquery draggables, however if at any point I remove one of these draggables from the page then this can move the rest of them as they are positioned with relative.

Here is a fiddle showcasing this: http://jsfiddle.net/VolatileStorm/aNk6e/

My proposed solution is that the draggable should be using absolute as opposed to relative positioning, however I can't find a way to do this. Is there a way to do this, and if not, can anyone think of a way around it? (For elegance's sake, I won't accept "don't delete the other draggable").

like image 329
V.S. Avatar asked Aug 01 '11 21:08

V.S.


3 Answers

  1. Add position:absolute to your elements.
  2. Attach them to the DOM before calling .draggable.
like image 88
Paul Draper Avatar answered Dec 23 '22 07:12

Paul Draper


Why doesn't position:absolute work for you?

Since absolutely positioned elements are no longer part of the document flow, each of your three <div>s are placed at 0,0 of its containing (positioned) element. Thus, it's up to you to work out the starting position of your draggables.

like image 24
josh3736 Avatar answered Dec 23 '22 09:12

josh3736


You can set the position to be absolute by using the jQuery css function when setting an element to be draggable.

$(this).draggable().css("position", "absolute");
like image 22
SeanK Avatar answered Dec 23 '22 07:12

SeanK