aframe-mouse-dragndrop

Drag-n-drop entites using mouse cursor.

implementation

There's a new parameter in cursor component that we can use to monitor mouse interaction.

<a-scene cursor="rayOrigin: mouse"></a-scene>

Based on this feature, we can intercept the event data emitting by the cursor component. read more about cursor component

I've sperated this module into two sepearte component, track-cursor and dragndrop. And use dependencies to chain component startup. read more about component dependencies So you can add features like animation or hovering effects before draggin it.

When a draggable component is being hovered by the cursor, it will make the entity into tracking state. You can check it with

if (this.el.is("tracking")) {
  ...
}

If a draggable component is being pressed, it will enter the dragging state. Likewise you can check it with:

if (this.el.is("dragging")) {
  ...
}

If you want to do some startup/cleanup before entering/exiting these two states, be sure to listener to "stateadded"/"stateremoved" events.

usage

<a-entity dragndrop></a-entity>

After adding the component, you can drag and drop it with mouse click.

additional features

1. When dragging the entity, look-controls on the camera will be temporary disabled.
2. You can use mousewheel to send it further/closer when dragging.

Check out the live demo: link

Appreciate any suggestions or feedback.