javascript - Draggable line with draggable points in ReactJS or plain JS?

Question

I've been working on trying to create a draggable line with draggable points on my website. I'm working on a really simple proof of concept.

So far, I have been able to get two draggable points, and a line that gets drawn between the two points, but I am really stumped on how I can also make the line itself draggable and just have the lines move along with it. (Basically like the behavior in DrawIO for editing a plain line https://app.diagrams.net - draggable dots with a draggable line)

Here's some of the proof of concept code that I have so far: https://codesandbox.io/s/stupefied-fermat-qpigl

I'm thinking I might have to create my own listeners on the line and have it manually update the coordinates of the endpoints since I don't think I can get Drawable to work with both the line and the points without it exploding.

Anyone have options or tips on how I could get this working?

Update: I was able to get the whole line to move but only by kind of working around the issue. I made a midpoint between the two endpoints and made that midpoint draggable. Based on how much that midpoint was dragged, I also dragged the endpoints. The line will always be calculated to be drawn between the endpoints. It's still not ideal though, as I was hoping to make the whole line draggable itself. Still would appreciate ideas!

Updated sandbox: https://codesandbox.io/s/jovial-pascal-8s6x2

标签： javascriptreactjsdraggable