Ajouter des éléments pendant un dragstart

Je dispose de plusieurs pièces qui peuvent s'empiler et j'associe un événement dragstart à chaque pièce. Une fois qu'un événement est déclenché, je dois vérifier si des pièces existent au-dessus, et, si oui, alors il faut ajouter ces pièces au dragstart afin qu'elles soient déplacées en même temps.

Voici un début de code : https://jsfiddle.net/b57pn0jo/3/ (ouvrir la console). Pour le moment, chaque pièce possède un événement dragstart et, une fois déclenché (cliquer et déplacer une pièce), il liste les pièces situées au-dessus. J'aimerais ajouter ces pièces à l'événement dragstart (mouseevent ?) pour qu'elles soient déplacées aussi.

la seule façon selon moi de faire ceci avec draggable est d'organiser les pièces par imbrication d'éléments partant du bas pour aller d'enfants en enfants en imbrications progressives.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<div class="container" style="height:auto;" draggable="true"> <div data-line="0" data-column="0" data-height="1" class="piece" data-color="2"></div> <div class="container" style="height:auto;" draggable="true"> <div data-line="0" data-column="0" data-height="2" class="piece" data-color="1"></div> <div class="container" style="height:auto;" draggable="true"> <div data-line="0" data-column="0" data-height="3" class="piece" data-color="1"></div> <div class="container" style="height:auto;" draggable="true"> <div data-line="0" data-column="0" data-height="4" class="piece" data-color="2"></div> </div> </div> </div> </div>

---

sinon il faudra passer par autre chose que draggable genre un évènement onclick, puis un évènement onmousemove. Mais c'est plus compliqué.

Citation:

---

Envoyé par 01001111

la seule façon selon moi de faire ceci avec draggable est d'organiser les pièces par imbrication d'éléments partant du bas pour aller d'enfants en enfants en imbrications progressives.

---

Très bonne idée, merci !