Question

很抱歉，如果这已经出现在某个地方，但我一直在寻找一段时间但没有找到任何东西。我想知道是否有任何方法，给定页面上绝对定位元素的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，我只是在寻找一种我可能不知道的方法，或者寻找之前可能遇到此问题的人的答案。

Answer 1

通过删除拖动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

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

1 个答案: