Skip to main content
2mo ago

Add Drag & Drop events (manually creating it with enter/exit is buggy)

Right now the only way to create drag & drop functionality is like this:

  1. Pointer down on target sets isDragging value to true

  2. When isDragging === true align target to pointer

  3. on pointer up or exit, set isDragging to false

This works alright, but is cumbersome and is pretty finicky. When you drag too fast or if you keep dragging until you're off the hit area, you can run into issues. Sometimes it doesn't clock the exit event which can cause strange behavior. See this video where it's dragging even when the pointer is up and how the distance between the pointer and the drag element drifts the more I drag:

The smaller the draggable item, the more likely you are to run into issues.

Solution

Build out-of-the-box drag/drop events into Rive that account for things like fast pointer movement, pointer up outside of the Rive artboard area.

2 replies
2mo ago

HI . This is far from an ideal solution but, as a workaround, you can increase the scale of the hitbox in the Dragging state, so the cursor is always inside it when releasing or moving the cursor too fast.

2mo ago

Good workaround, thanks.