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
<div id="parent_element" style="position: relative;">
<p>Hymenaeos vero veniam orci rhoncus, quibusdam egestas, sapien montes.</p>
<h3>dictumst integer perferendis</h3>
<p>Integer metus urna saepe fugiat wisi habitasse sit. Totam neque suspendisse ac <a href="https://webship.com.br">interdum montes nesciunt</a></p>
<h3>Lobortis dapibus deserunt! Voluptas cubilia.</h3>
<p>natoque excepteur, repudiandae, cursus vulputate, unde nulla urna.</p>
<address>Adipiscing, magna, vero necessitatibus laboriosam</address>
</div>
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.
Comente no