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

时间:2013-07-11 19:48:30

标签: javascript jquery dom css-position

很抱歉,如果这已经出现在某个地方,但我一直在寻找一段时间但没有找到任何东西。我想知道是否有任何方法,给定页面上绝对定位元素的x和y坐标/偏移量,将该元素更改为相对定位的元素,但让它保持在同一个视点,更改其DOM中的位置。例如,给出这个html

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

如果divOne绝对定位并且它的位置恰好落在divTwo和divThree之间,有没有办法让我转换它的x,y位置,这样我就可以告诉jQuery将它放在divOne之后和divTwo之前DOM?我非常精通Javascript和jQuery,我只是在寻找一种我可能不知道的方法,或者寻找之前可能遇到此问题的人的答案。

1 个答案:

答案 0 :(得分:0)

通过删除拖动div的绝对定位,您必须将其标记放在dom中的其他位置,以便重新定位。

例如,如果你拖动#divOne使它在#divTwo和#divThree之间可视化移动你应该做的是删除#divOne的绝对位置并在其他两个div之间移动它的标记:

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

如果你有一个明确定义的网格,这将有效。

如果我是你,那么我要做的就是为我想要的网格中任何div重新安排一个标准类。例如,“可安排”的类。当拖尾发射时,我会使用以下公式计算我的拖动div必须放在dom中的位置:

拖动的div应该移动到dom上的另一个位置。它将会发生的是被拖动的div将取代现有的div并“推动”现有的div。例如,通过在#divTwo和#divThree之间拖动#divOne,#divOne取代#divThree并将其推送到它之后。假设用户停止拖动并释放左键单击时拖动的div位于将被占用的现有div上(让我们将其命名为“pushDiv”),那么您所要做的就是识别pushDiv ,从dom中移除拖动的一个,放在识别出的那个之前,并使其位置相对。

为了实现pushDiv,你可以使用这个例程:

//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