PrismView | ViewHelper to provide one activity applications | Animation library

Use mousedown, mouseup, and mousemove event listeners just to update the mouse state. Eg the position and the button state.

The logic to drag rendered items should be done in the main render loop. In the example renderLoop calls handleMouse before rendering any content.

Rather than do a full VUE app example I have done the most basic text drag and drop so you can see a code example.

In handleMouse check if mouse is down mouse.button === true

• if so and not dragging and there is text to drag under the mouse set dragging to true and calculate the offset from the mouse pos to the text x, y
• "Drag" if the mouse is down and dragging true then update the selected text position by setting it to the mouse position plus the drag offset

If the mouse is up mouse.button === false

• and dragging is true then set dragging to false. The selected text item is dropped
• set selectedText to the first text item under the mouse.

Also handles highlighting and cursors for the mouse and text to give positive feedback to the user.

I have extended an array to handle text items. The important function is much the same as you had textItems.getUnder(point) return the text item under point.x point.y. If the point is not over a text item then the function returns undefined.

As an example it may not meet all your needs, and is by no means the only way to handle drag and drop for rendered canvas content.

I hope this helps.