将绝对定位转换为相对定位

Question

Sorry if this is already out there somewhere, but I've been looking for a while and haven't found anything. I'd like to know if there's any way to, given the x and y coordinates/offset for an absolutely positioned element on a page, change that element into a relatively positioned element, but have it stay in the same visual spot, changing its location in the DOM. For example, given this html

<div id="divOne"></div>
<div id="divTwo"></div>
<div id="divThree"></div>

if divOne were positioned absolutely and its position happened to visually fall between divTwo and divThree, is there a way for me to convert its x,y position so I would be able to tell jQuery to place it after divOne and before divTwo in the DOM? I'm well versed in Javascript and jQuery, I'm just looking for a method I may not know about or for an answer from someone who may have come across this before.

Answer 1

by removing the absolute positioning of the dragged div you must place its tag to a different place in the dom in order to get it repositioned.

For example if you drag #divOne so that it visually moves between #divTwo and #divThree what you should do is remove the absolute positioning of #divOne and move its tag between the two other divs:

<div id="divTwo"></div>
<div id="divOne"></div>
<div id="divThree"></div>

If you have a well-defined grid this will work.

If I were you what I would do is to give a standard class to any div in my grid that I want be re-arrangeable. Eg, the class "arrangeable". When the drag-end fires I would calculate where my dragged div must be placed in the dom using this formula:

The dragged div should be moved to another place on the dom. What it will happen is that the dragged div will take the place of an existing one and "push" the existing just after it. For example by dragging #divOne between #divTwo and #divThree, #divOne takes the place of #divThree and pushes it after it. Supposing that the user stops the drag and releases left click when the dragged div is over the existing div whose place is going to be taken (let's name it "pushedDiv") by the dragged one then all you have to do is to recognize the pushedDiv, remove the dragged one from the dom, place right before the recognized one and make its position relative.

In order to realize which is the pushedDiv you can use this routine:

//on drag end, where mouse has x and y coords:
var pushedDiv;
$(".arrangeable").each(function(index,value){
    var theoffset = $(this).offset();
    if(x >= theoffset .left && x <= theoffset .left + $(this).width() && y >= theoffset .top && y <= theoffset .top + $(this).height()){
         pushedDiv = $(this);
    }
});
// if pushedDiv is still null then the user didn't release the left click over a div of class "arrangeable". Else, the pushedDiv will be the one we are looking for