How to move an object to a point in screen in gsap

I have a dom element with a specific class name, and I'm trying to move this element to a specific point in the screen after the user finished dragging it.

In order to do that, my plan is to create a temp dom element in the position I want to move the point to, move the original element, and then remove the temp element.

Here's my code

gsap.registerPlugin(Draggable, MotionPathPlugin)
const selector = ".my-obj";
Draggable.create(selector, {
    type: "x,y",
    onDragEnd: function (e: any) {
        const pointTag = document.createElement("temp-point-tag");
        pointTag.style.position = 'absolute';
        pointTag.style.top = 200 + window.scrollY + "px";
        pointTag.style.left = 400 + window.scrollX + "px";
        pointTag.style.width = "3px"
        pointTag.style.height = "3px"
        pointTag.style.backgroundColor = "red"
        document.body.appendChild(pointTag);

        const point = MotionPathPlugin.convertCoordinates(pointTag, document.querySelector(selector), { x: 0, y: 0 })
        gsap.to(selector, { x: point.x, y: point.y });
    },
});

My code doesn't work as expected. It doesn't have a static behaviour. If I dragged the object. it goes to a random place in the screen, and might also go outside the screen.

The expected behaviour for MotionPathPlugin.convertCoordinates, as I understand from the documentation, is to move to {x:0, y:x} relative to the object's coordinates which I specified.

Why is MotionPathPlugin.convertCoordinates not working? What is the correct way to move an object to a specific point(x,y) in the screen?

Sample codepen: I'm trying to move the red square to the red dot after dragging event has ended https://codepen.io/abozanona/pen/wvZMdLd

Solution

gsap.registerPlugin(Draggable);
const selector = ".my-obj";
Draggable.create(selector, {
  type: "x,y",
  onDragEnd: function (e) {
    const pointTag = document.createElement("temp-point-tag");
    pointTag.style.position = "absolute";
    pointTag.style.top = "100px";
    pointTag.style.left = "100px";
    pointTag.style.width = "3px";
    pointTag.style.height = "3px";
    pointTag.style.backgroundColor = "red";
    document.body.appendChild(pointTag);

    const point = pointTag.getBoundingClientRect();
    console.log(point);
    gsap.to(selector, { left: point.left, top: point.top, x: 0, y: 0 });
  }
});

.my-obj {
  width: 50px;
  height: 50px;
  position: absolute;
  bottom: 50px;
  left: 50%;
  background-color: red;
  will-change: transform;
}

<div class="my-obj"></div>

<script src="https://unpkg.com/gsap@3/dist/Draggable.min.js"></script>

<script src="https://unpkg.com/gsap@3/dist/CSSRulePlugin.min.js"></script>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

Here's the solution. You don't need to use extra plugins to just change the position values I guess. Here's the codepen link of the solution. Link