[Object is not following svg motion path]

I'm trying to move an object `#from` to another object `#to` along a path defined in an svg element.

 

If I try to move a circle along the path using `align` & `alignOrigin`, the circle indeed moves along the path, as shows in the codepen code sample.

 

But what I need is to move an object from it's current position to another's object position, and I want the shape of the movement to be like how it is in the path, even if SVG was not visible. The current behaviour is that the `#from` object start position is changed, and the end position is not the same as `#to` object.

 

What I'm trying to do is somehow move an object to a point using a path. If the distance between the two objects is for example longer than the defined path, I would expect the path to expand to match the distance between the two points. I also want to expect that object a will move to the same exact position as object b using the path even if the path's position was not between object a & b.

See the Pen XWQdjwM by abozanona (@abozanona) on CodePen

[How to prevent dragging a sub element]

I'm trying to add a menu for a draggable object. The menu has three options(three grey squares). I want the menu to always be on top of the draggable object(the red square), and I don't want to allow the user to drag using the menu. If the user clicks on the menu, I need to only execute a js function and not allow the user to drag it.

 

In order to position the menu always on top of the draggable object, I defined the menu inside the draggable object. But now I need to find a way to disable the dragging behaviour from the menu(the cursor and the ability to drag).

 

See the Pen BaEjMZo by abozanona (@abozanona) on CodePen

[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 

See the Pen wvZMdLd by abozanona (@abozanona) on CodePen