Estoy trabajando con arrastrar y soltar y hasta ahora funciona bien. Tengo imágenes, que puedo colocar en mis diferentes áreas de colocación. Para mantener las imágenes originales, arrastro un clon. Al hacer clic (mouse hacia abajo) en la imagen y arrastrarla, todo funciona bien. Tengo un clon de la imagen en mi área de colocación deseada.
Mi problema: al hacer clic en la imagen más de una vez ANTES de arrastrarla, los eventos de arrastre se acumulan. ¿Cómo puedo prevenir esto? Eliminar el eventlistener con "mouseup" no funciona...
Feliz por alguna ayuda. Aquí está mi código básico:
let myPictures = document.querySelectorAll('.myPictures'); myPictures.forEach(function(myPic) { myPic.addEventListener('mousedown', evLiMyPic); function evLiMyPic(e){ if(!resize){ mousedownMyPic(e, myPic); } } myPic.addEventListener('mouseup', evLiMyPicMouseUp); function evLiMyPicMouseUp(e){ if(!isResizing){ mouseupMyPic(e, myPic); } } }); function mousedownMyPic(e, myPic){ myPic.addEventListener('dragstart', dragstartMyPic); myPic.addEventListener('dragend', dragendMyPic); let dropAreas = document.querySelectorAll('.dropAreaDrag'); dropAreas.forEach(function(dropArea) { dropArea.addEventListener('dragover', evLidragoverMyPic); function evLidragoverMyPic(e){ dragoverMyPic(e, dropArea); } dropArea.addEventListener('drop', evLidropMyPic); function evLidropMyPic(e){ dropMyPic(e, dropArea); } }); } function mouseupMyPic(e, myPic){ myPic.removeEventListener('dragstart', dragstartMyPic); myPic.removeEventListener('dragend', dragendMyPic); let dropAreas = document.querySelectorAll('.dropAreaDrag'); dropAreas.forEach(function(dropArea) { dropArea.removeEventListener('dragover', evLidragoverMyPic); function evLidragoverMyPic(e){ dragoverMyPic(e, dropArea); } dropArea.removeEventListener('drop', evLidropMyPic); function evLidropMyPic(e){ dropMyPic(e, dropArea); } }); } function dragstartMyPic(e){ // do something } function dragendMyPic(e){ // do something } function dragoverMyPic(e){ // do something } function dropMyPic(e){ // do something }