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