Click, create object, immediately drag

Questions
,
1

I would like to achieve the following behavior. On mousedown in a specific place, a new object is immediately created and added to the DragControls. Subsequent mousemove (meaning, before mouseup!) should drag the newly created object.

I have tried manually firing a new mousedown event to the document and/or a dragstart event to the DragControls, but neither works- the events are fired and caught, but the object isn’t then dragged.

Intuitively, I think I want to get the DragControls into the same state it is immediately after the user clicks on an already-existing object, but I don’t know quite how to make this happen.

How can I get this to happen? Thanks for your consideration.

2

To solve this, you have to capture the mouse down event before the DragControls, then you create the object, insert it the controls’ array of objects … so that when the controls becomes aware of the mouse event, the object will be ready and waiting to be dragged.

Here is a simplified example. Click-and-drag to create-and-drag a cube.

https://codepen.io/boytchev/full/MWPjydO

image

4 Likes
3

Works a treat. Thank you!

1 Like