Как мне исправить это смещение 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;
}