HTML:
<body>
<div id="designDiv">
</div>
<button onclick="crearElemento('caja')">Crear Caja</button>
</body>
let numeroCajas = 0;
const infoTableCaja = document.getElementById("filasCajas");
let arrayCaja = [];
const designLayer = document.getElementById("designDiv");
function crearElemento(tipo) {
switch(tipo) {
case "caja":
numeroCajas++;
let caja = document.createElement("input");
caja.setAttribute('placeholder', 'Caja '+numeroCajas);
caja.setAttribute("id","caja"+numeroCajas);
designLayer.append(caja);
caja.focus();
arrayCaja.push(caja.id);
addListeners(caja);
break;
}
}
function addListeners(elemento) {
elemento.addEventListener('mousedown', mouseDown, false);
window.addEventListener('mouseup', mouseUp, false);
}
function mouseUp() {
window.removeEventListener('mousemove', divMove, true);
}
function mouseDown(e) {
window.addEventListener('mousemove', divMove, true);
}
function divMove(e) {
if(arrayCaja.indexOf(e.id)) {
elemento = e.target;
elemento.style.position = 'absolute';
elemento.style.top = e.clientY + 'px';
elemento.style.left = e.clientX + 'px';
}
}