I am working with drag and drop and so far it works fine. I have pictures, which I can position in my different drop areas. To keep the original pictures, I drag a clone. Clicking (mousedown) on the picture and drag it, everything works fine. I have a clone of the picture in my desired drop area.

My problem: Clicking on the picture more than once BEFORE dragging it, the dragevents accumalate. How can I prevent this? Removing the eventlistener with "mouseup" does not work...

Happy for some help. Here is my basic code:

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
}