¿Hay alguna manera de hacer un tablero de arrastrar y soltar en Angular? Lo que quiero hacer es tener una columna a la derecha con una lista de elementos que podría arrastrar en un div a la izquierda, y se copiarían en el cuadro de la izquierda y se podrían mover libremente (vea la imagen a continuación).

Hasta ahora, ya descubrí cómo hacer la parte de la lista, pero el problema es la parte del tablero. La lista es un div con el atributo cdkDropList , y todos los elementos que contiene tienen la etiqueta cdkDrag .

Lo que quería hacer es que cuando el usuario arrastrara un elemento de la lista al tablero izquierdo, habría interceptado el evento que se emite y copiado el elemento en el tablero. Pero el método que creé no se activa cuando esto sucede. Probé tanto onDragEnd como cdkDragEnded , sin éxito. ¿Quizás estoy confundido sobre qué elemento debería desencadenar el evento, el cuadro o el elemento?

Además, el 99% de los ejemplos en Internet muestran cómo hacer cosas de cdkDrop solo en listas. Casi me pregunto si el propio DragDropModule de Angular es la herramienta adecuada para lo que quiero hacer.

Aquí está mi artículo:

 <div class="rfid-box" cdkDrag cdkDragEnded="dragEndedProcess()" cdkDragBoundary={{boundary_name}}> {{object_name}} </div>

Y aquí está mi cuadro izquierdo (tablero):

 <div cdkDrop class="left-box"> <dragging-box object_name="Télécommande" boundary_name=".left-box"></dragging-box> </div>

Como puede ver, por ahora, el objeto "Télécommande" se crea manualmente, pero eventualmente todos los elementos se crearían arrastrándolos desde la lista de la derecha.