Draggable objects, different types

 from Red Blob Games
4 Jan 2023

Things to try with a mouse:

Things to try with touch:


 1  Test: SVG single element#

Draggable circle

 2  Test: SVG nested element with text#

Draggable circle + text

 3  Test: Canvas drawing#

The same drag event handlers can be used for drawing instead of moving an object:

Drag to draw on the canvas

 4  Test: Canvas dragging#

Drag the circle to move it

 5  Test: HTML div absolute positioned#

Drag me
Drag the box to move it

 6  Test: HTML div css transform#

Drag me
Drag the box to move it

 7  Notes#

None of these handle CSS transforms on the parent elements. This is an unsolved issue, not only for me, but also other libraries like d3.js. See https://github.com/d3/d3-selection/issues/67[3] and https://bugzilla.mozilla.org/show_bug.cgi?id=1610093[4] . There’s probably something we can do using window.getComputedStyle(element) but this is a low priority for me, as I almost never use css transforms above a draggable element.