JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tr>
        <td data-line="0" data-column="0">
            <div data-line="0" data-column="0" data-height="1" class="piece" data-color="2" draggable="true"></div>
            <div data-line="0" data-column="0" data-height="2" class="piece" data-color="1" draggable="true"></div>
            <div data-line="0" data-column="0" data-height="3" class="piece" data-color="2" draggable="true"></div>
            <div data-line="0" data-column="0" data-height="4" class="piece" data-color="2" draggable="true"></div>
        </td>
        <td data-line="0" data-column="1">
            <div data-line="0" data-column="1" data-height="1" class="piece" data-color="1" draggable="true"></div>
        </td>
    </tr>
</table>

CSS

table {
		    border: 2px solid black;
		    border-collapse: collapse;
		}
		table tr td {
		    background: white;
		    width: 100px;
		    height: 100px;
		    border: 1px solid black;
		    position: relative;
		}
		table tr.indice, table tr th.indice {
		    background: lightgray;
		    padding: .3em;
		}
		.piece {
		    width: 70%;
		    height: 35px;
		    border-radius: 100%;
		    border: 1px solid black;
		    position: absolute;
		    left: 15px;
		}
		.piece[data-color='1'] {
		    background: #FF7400;
		}
		.piece[data-color='2'] {
		    background:#009B9B;
		}
		.piece:hover {
		    border: 1px solid white;
		}
		table tr td div.piece:nth-child(1) {
		    bottom: 15px;
		    z-index: 10;
		}
		table tr td div.piece:nth-child(2) {
		    bottom: 30px;
		    z-index: 20;
		}
		table tr td div.piece:nth-child(3) {
		    bottom: 45px;
		    z-index: 30;
		}
		table tr td div.piece:nth-child(4) {
		    bottom: 60px;
		    z-index: 40;
		}
		table tr td div.piece:nth-child(5) {
		    bottom: 75px;
		    z-index: 50;
		}

JavaScript

var pieces = document.querySelectorAll('.piece');
	
	for(var i=0 ; i<pieces.length ; i++) {
		addEventDrag(pieces[i]);
	}
	
	// fonctions
	function test(e) {
		// compte le nombre de pièces au-dessus
		var cell = this.parentNode;
		var cellChilds = cell.childNodes;
		var count = 0;
		for(var i=0 ; i<cellChilds.length ; i++) {
			if(cellChilds[i].className == 'piece')
				count++;
		}

		// ajoute des pièces à l'événement(?)
		for(var i=this.dataset.height ; i<=count ; i++) {
			console.log(i);
		}
	}

	function addEventDrag(piece) {
		piece.addEventListener('dragstart',test,false);
	}