Skip to main content
2 de 3
se añadieron 133 caracteres en el cuerpo
Dev 200
  • 5.5k
  • 7
  • 47
  • 91

¿Como agregar eventos a elementos creados por función en Javascript?

Poseo estas cuatro funciones que permiten arrastrar un objeto del DOM:

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) {
    // Recien agrego e.target.
    // Anteriormente estaba asi =>
    // let elemento = document.getElementById("div");
    // Pues era un único div
    elemento = e.target;
    elemento.style.position = 'absolute';
    elemento.style.top = e.clientY + 'px';
    elemento.style.left = e.clientX + 'px';
}

Con esta funcion creo los tipos de elementos (cajas, textareas y demas):

function crearCaraja() {
    let caja = document.createElement("input");
                    caja.setAttribute('placeholder', 'Caja '+numeroCajas);
                    caja.setAttribute("id","caja"+numeroCajas);
                designLayer.append(caja);
                actualizarTabla("caja");
                caja.focus();
                addListeners(caja);
}

Quisiera que a cada elemento al ser creado se le agregara las funciones de moveUp, moveDown y divMove.

En un principio funcionan bien las dos primeras, pero divMove daba error porque no estaba definido elemento, lo que hice fue agregar e.target, pero cuando le doy para arrastrar el elemento arrastrara completamente todo el div principal.

¿Como puedo modificar la función para que se le agregue los eventos a cada elemento creado?

Dev 200
  • 5.5k
  • 7
  • 47
  • 91