Преобразование абсолютного позиционирования в относительное позиционирование

Question

Извините, если это уже где-то есть, но я искал какое-то время и ничего не нашел. Я хотел бы знать, если есть какой-либо способ, учитывая координаты x и y/смещение для абсолютно позиционированного элемента на странице, измените этот элемент на относительно позиционный элемент, но оставайтесь в одном и том же месте, изменив его местоположение в DOM. Например, если этот HTML

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

если divOne позиционировались абсолютно и его положение было визуально падать между divTwo и divThree, есть способ для меня, чтобы преобразовать его х, у позиции, так что я мог бы сказать, jQuery разместить его после divOne и до divTwo в DOM? Я хорошо разбираюсь в Javascript и jQuery, я просто ищу метод, о котором я, возможно, не знаю, или для ответа от кого-то, кто, возможно, сталкивался с этим раньше.

Answer 1

, удалив абсолютное позиционирование перетаскиваемого div, вы должны поместить свой тег в другое место в dom, чтобы переместить его.

Например, если вы перетащите #divOne так, что визуально перемещается между #divTwo и #divThree, что вы должны сделать, это удалить абсолютное позиционирование #divOne и переместить его тег между двумя другими дивы:

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

Если у вас есть четко определенная сетка, это будет работать.

Если бы я был вами, то я бы сделал, чтобы дать стандартный класс любому div в моей сетке, который я хочу быть реорганизованным. Например, класс «упорядочиваемый». Когда загорается перетаскивание, я бы вычислил, где мой перетаскиваемый div должен быть помещен в dom с помощью этой формулы:

Перетаскиваемый div должен быть перемещен в другое место на dom. Что произойдет, так это то, что перетаскиваемый div заменит существующий и «подтолкнет» существующие сразу после него. Например, перетаскивая #divOne между #divTwo и #divThree, #divOne занимает место #divThree и выталкивает его после него. Предположим, что пользователь останавливает перетаскивание и отпускает левый клик, когда перетаскиваемый div находится над существующим div, чье место будет принято (назовем его «pushedDiv») перетаскиваемым, тогда все, что вам нужно сделать, это распознать pushedDiv , удалите перетаскиваемый из dom, поместите его прямо перед распознанным и сделайте его положение относительно.

Для реализации которых является pushedDiv вы можете использовать эту подпрограмму:

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