Skip to main content
se añadieron 1492 caracteres en el cuerpo
Origen Enlace
Dev 200
  • 5.5k
  • 7
  • 47
  • 91

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';
    }
}

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';
    }
}
se añadieron 133 caracteres en el cuerpo
Origen Enlace
Dev 200
  • 5.5k
  • 7
  • 47
  • 91

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?

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.
    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?

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?

Origen Enlace
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.
    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?