vue 移动dom元素 至click的位置方法?

Question

        htmlElement = document.getElementById('icon-option-list') as HTMLElement  (是绝对定位 ,不确定 top 与 left 位置)
 
        let x = htmlElement.getBoundingClientRect().top - e.clientY    // 点击位置 与 htmlElement 元素的 x相差距离,这样算对吗?
        let y = htmlElement.getBoundingClientRect().left - e.clientX   // 点击位置 与 htmlElement 元素的  y相差距离
          在不知道 htmlElement 相对 定位元素 的位置时,不
         现在我要把 htmlElement  元素 移动到点击位置, 怎么移动?


        这样好象不对:
            htmlElement.style.top = htmlElement.offsetTop + y +'px'
            htmlElement.style.left = htmlElement.offsetLeft + x+'px'

Answer 1

直接设置htmlElement 的left/top为事件对象e.clientX和e.clientY就可了。e.clientX和e.clientY就是点击的位置，移动到这个位置不需要再计算，不过是居于htmlElement 的左上角，如果htmlElement 的中心点在点击的位置需要计算过

<div id="icon-option-list" style="position:absolute;left:0;top:0;border:solid 1px #ccc;padding:10px">icon-option-list</div>
<script>
    document.onclick = function (e) {
        htmlElement = document.getElementById('icon-option-list')// as HTMLElement

        //居于htmlElement左上角
        //htmlElement.style.left = e.clientX + 'px'
        //htmlElement.style.top = e.clientY + 'px'

        //下面居于htmlElement中心点
        let info = htmlElement.getBoundingClientRect()

        htmlElement.style.left = e.clientX-info.width/2 + 'px'
        htmlElement.style.top = e.clientY - info.height / 2 + 'px'
    }
</script>