如何修复3d翻译的偏移量？

Question

所以我有此翻译代码，并且我还有一个onclick事件，可将翻译重置为某个x和y坐标，但它似乎与偏移有关，因为当我尝试再次移动它时，它没有对齐鼠标所在的位置。

翻译代码：

   var dragItem = document.querySelector("#mobileMessage");
    var container = document.querySelector("#mobileMessage");

    var active = false;
    var currentX;
    var currentY;
    var initialX;
    var initialY;
    var xOffset = 0;
    var yOffset = 0;

    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);

    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);

    function dragStart(e) {
      if (e.type === "touchstart") {
        initialX = e.touches[0].clientX - xOffset;
        initialY = e.touches[0].clientY - yOffset;
        document.getElementById('messages2').style.display = 'none';

      } else {
        initialX = e.clientX - xOffset;
        initialY = e.clientY - yOffset;
      }

      if (e.target === dragItem) {
        active = true;
      }
    }

    function dragEnd(e) {
      initialX = currentX;
      initialY = currentY;

      active = false;
    }

    function drag(e) {
      if (active) {

        e.preventDefault();

        if (e.type === "touchmove") {
          currentX = e.touches[0].clientX - initialX;
          currentY = e.touches[0].clientY - initialY;
        } else {
          currentX = e.clientX - initialX;
          currentY = e.clientY - initialY;
        }

        xOffset = currentX;
        yOffset = currentY;

        setTranslate(currentX, currentY, dragItem);
      }
    }

    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }

我的onclick事件，用于将转换重置为固定点

function openMessages() {

var d = document.getElementById('mobileMessage');
d.style.transform = "translate3d(16px, -273px, 0px)";

document.getElementById('messages2').style.display = 'block';

}

我的代码

<div id="imageMsg"  class="mobileMessage">
<object class="messageImage2"  data="data:image/jpg;base64,'.base64_encode($ProfilePicture).'"/ type="image/png"><img id="mobileMessage" onclick="openMessages()" style="width:50px;height:50px;position:relative;margin: auto;border-radius:100px;margin-top: -20px;" src="../Assets/Images/NoImage.png" alt="example"></object></img>
</div>

css

.mobileMessage {
    display: block;
    position: absolute;
    margin-top: -173%;
    height: 200px;
}
.messageImage2 {
    top:10px;
    border-radius:50%;
    width:50px;
    height:50px;
    position:relative;
}