JSFiddle - React, Tailwind, and code Playground

HTML

<div class="draggableBox">1</div>

CSS

.draggableBox {
  position: absolute;
  width: 80px; height: 60px;
  padding-top: 10px;
  text-align: center;
  font-size: 40px;
  background-color: #222;
  color: #CCC;
  cursor: move;
}

JavaScript

(function dragDrop() {
	var element = document.querySelectorAll('.draggableBox');
    var inTheBox = false, box; // Ne fonctionne pas si je mets box { };
	
	document.addEventListener('mousedown', function(e) {
		
		for(var i = 0; i < element.length && e.target != element[i]; ++i)
			box = element[i];
		if(i < element.length) {
			box.x = e.clientX - box.offsetLeft;
			box.y = e.clientY - box.offsetTop;	
			inTheBox = true;
		}
	}, false);
	
	// Semble ne pas reconnaître l'objet box.
	box.addEventListener('mouseup', function() {
		alert("test");
		inTheBox = false;
	}, false);

	document.addEventListener('onmousemove', function(e) {	
		if(inTheBox) {
			box.style.left = e.clientX - box.x + "px";
			box.style.top = e.clientY - box.y + "px";
		}
	}, false);
})();