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.

If you don't want the drop event to propagate from the children to the parents, you can add ev.stopPropagation() in the child event. — Ben, Jun 05 '20 at 08:39
Only the parent listener is firing not the child listener. So I don't think that it's due to bubbling. — Bhavesh Wadhwani, Jun 05 '20 at 09:38
Can you provide a jsfiddle (or equivalent) of your issue so we can see the problem? — Ben, Jun 05 '20 at 09:42
I have added the fiddle and explained my problem more-clearly. — Bhavesh Wadhwani, Jun 05 '20 at 10:31

score 1 · Accepted Answer · answered Jun 05 '20 at 10:58

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.

Thank you so much for your help , it's still a rough code and that's why the errors . — Bhavesh Wadhwani, Jun 05 '20 at 11:46

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

1 Answers1