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 precisa ter um posicionamento diferente de static
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.