Drag'n'Drop

[MrWelsch]

Hello,

I'm new to Angular Three and was wondering how to implement a simple drag'n'drop functionality.

Let's say my template looks like this:

<ngt-canvas
  [shadows]="true"
  [gl]="{ alpha: false }"
  [camera]="{ position: [-1, 5, 5], fov: 45 }"
  [scene]="{ background: 'lightblue' | color }"
>
  <ngt-physics>
    <room>

      <ngt-ambient-light></ngt-ambient-light>

      <ngt-directional-light
        [position]="[10, 10, 10]"
        [castShadow]="true"
        [shadow]="{ mapSize: [2048, 2048] | vector2 }"
      ></ngt-directional-light>

      <floor>
         <DRAG'N'DROP COMPONENT>
             <cube></cube>
         </DRAG'N'DROP COMPONENT>
      </floor>
      
    </room>
  </ngt-physics>
  <!--  -->
  <ngt-soba-orbit-controls></ngt-soba-orbit-controls>
</ngt-canvas>

How would I be able to create a component, much like the physics component which makes all child elements drag'n'droppable or does a component like this already exist in ngt?

[IRobot1]

See the mouse click example.
When the mouse is clicked, a constraint is created between the cube and the sphere. The sphere follows the mouse until released.

Note that constraints only work in current V5 beta.