Question

I am working on updating my own draggable script and I am wondering how jquery-ui allows for you to have the position of an element set to relative and still allows for you to move it without affecting any of the elements around it that are also positioned relatively and floated?

As of right now my current script takes any element and gets its position but then sets it to absolute when you drag it, as a result all elements around it end up shifting to take its place.

My only two ideas are to:

a) Automatically set all elements on the page to position:absolute when I move one that’s draggable (seems really inefficient).

b) Create an invisible copy of the current element that will remain in the exact spot.

and the to essentially implement:

var e = document.getElementById('div');
console.log(document.defaultView.getComputedStyle(e, null).getPropertyValue("position"));

from which I can determine if either step a or b is even necessary at all.

However, from what I can tell, to me it seems like jquery-ui-draggable does neither of these.

Here is an example of this using jquery-ui-draggable: http://jsfiddle.net/aNk6e/17/

How can I accomplish that same effect?

Answer 1

This is how position: relative works. The element still affects the document as though it was in its original position, but can be moved.

Consider this fiddle:

http://jsfiddle.net/aNk6e/18/

Notice how the other two items are still affected as though the element were in its original position but the element is moved.

By simply manipulating top and left you can move the element around without affecting other elements in the document flow.