Obter a posição Top e Left de elementos em relação ao container pai com JavaScript puro
element.offsetLeft e element.offsetTop da a posição de um elemento em relação ao seu offsetParent (que é o elemento pai mais próximo com uma posição de relativa ou absoluta).
function offsetPosition(pos) {
var selection = window.getSelection();
if( selection.rangeCount > 0 ) {
var range = selection.getRangeAt(0);
var container = range.commonAncestorContainer;
/** se precisar pagar só um elemento não precisa do loop,
* só adicione parentNode antes dos offset */
while(container && container.nodeType !== 1) {
container = container.parentNode;
}
if(container && container.closest('#parent_element')) {
if( container.tagName == 'H3' || container.tagName == 'ADDRESS' ) {
if( pos == 'top' )
return container.offsetTop;
else
return container.offsetLeft;
}
}
}
}
O conteiner pai tem ter um posicionamento diferente de static
Hymenaeos vero veniam orci rhoncus, quibusdam egestas, sapien montes.
dictumst integer perferendis
Integer metus urna saepe fugiat wisi habitasse sit. Totam neque suspendisse ac interdum montes nesciunt
Lobortis dapibus deserunt! Voluptas cubilia.
natoque excepteur, repudiandae, cursus vulputate, unde nulla urna.
Adipiscing, magna, vero necessitatibus laboriosam
Execulte a função
document.querySelector("#parent_element").addEventListener('mouseup', () => {
console.log('Top: ', offsetPosition('top'));
console.log('Left: ', offsetPosition('left'));
});
Copie e cole o codigo e veja ele funcionando, ai é claro faça as alterações necessárias para o seu projeto. Qualquer dúvida deixe nos comentários.