From f32cc1bc20a0e3d70244b63001e62d6308b05c4c Mon Sep 17 00:00:00 2001 From: extraymond Date: Thu, 4 Jul 2019 20:15:45 +0800 Subject: [PATCH] Update README.md --- README.md | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/README.md b/README.md index e5235e7..3c4f033 100644 --- a/README.md +++ b/README.md @@ -4,3 +4,46 @@ # 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. + +```html + +``` +Based on this feature, we can intercept the event data emitting by the cursor component. [read more about cursor component](https://aframe.io/docs/0.9.0/components/cursor.html#intersection-data) + +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](https://aframe.io/docs/0.9.0/core/component.html#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 + +```js +if (this.el.is("tracking")) { + ... +} +``` +If a draggable component is being pressed, it will enter the dragging state. Likewise you can check it with: + +```js +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 + +```html + +``` +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](https://sassy-piper.glitch.me) + +Appreciate any suggestions or feedback.