Dropping over child triggers the "drop" event listener of parent . I want to override that event listener by a Child specific "drop"

Question

This is my code. I have defined two different drop events with different selectors but the parent one overrides the child drop.

//this is parent
for(let i=0 ; i < $(".Droppable").length; ++i)
{
    document.querySelectorAll(".Droppable")[i].addEventListener("drop",function (ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("text");
        var copyimg= document.createElement("img");
        var orignal= document.getElementById(data);
        copyimg.src=orignal.src;
        copyimg.alt=orignal.alt;
        copyimg.style.zIndex=2
        copyimg.classList.add("Droppable2");
        ev.target.appendChild(copyimg);
        copyimg.style.position="fixed";  
        copyimg.style.left=ev.clientX+"px";
        copyimg.style.top=ev.clientY+"px";
        }  );
        document.querySelectorAll(".Droppable")[i].addEventListener("dragover" ,function(ev){
            ev.preventDefault();
        });
    }

the parent "drop" is for a and child "drop: is for a . I want to assign a particular function when the client drops on the image.

//this is child   
        for(let i=0;i<$(".Droppable2").length;++i)
        {   document.querySelectorAll(".Droppable2")[i].addEventListener("drop",function (ev) {
            ev.preventDefault();
                var data=ev.dataTransfer.getData('text');
            myExperiment.Add(Number(data));
            alert("test is" + myExperiment.test+"  indication is"+myExperiment.indication);
            }  );
            document.querySelectorAll(".Droppable2")[i].addEventListener("dragover" ,function(ev){
                ev.preventDefault();
        });

    }

This is my fiddle : https://jsfiddle.net/Bhavesh21/1haokeum/5/ the aliceblue div is workspace you can drag appratus and reactants to workspace . if you first drag SampleTestTube to the workspace then drag reagent over it then the listener associated with the image is not working.

on the other hand if you drag Reagent directly over the SampleTestTube in the appratus it works.

Answer 1

When you drop an item in the workspace, you actually create manually a copy of it. But this copy doesn't have a listener attached to it (because the copy didn't exist when you searched all the .Droppable2 items and attach the drop listener to them).

All you have to do is to attach the same event listener you used for .Droppable2 to your copy:

copyimg.addEventListener("drop", function(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData('text');
  myExperiment.Add(Number(data));
  alert("test is" + myExperiment.test + "  indication is" + myExperiment.indication);
  ev.target.appendChild(data);
  //document.createElement("img");
  console.log(this.parentNode);
  this.parentNode.removeChild(this);
});
copyimg.addEventListener("dragover", function(ev) {
  ev.preventDefault();

});

jsfiddle: https://jsfiddle.net/js1nbxry/

NB1: I just copy/paste'd the code you did to attach the drop listener, but it may be clearer to put that in a function and call the function.

NB2: There are errors in your code, I didn't fix them, but at least you have your child listener in the workspace.