0

这是我的代码。我用不同的选择器定义了两个不同的 drop 事件，但是父事件覆盖了子 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();
        });
    }

父“drop”用于a，子“drop：用于a。我想在客户端放在图像上时分配一个特定的功能。

//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();
        });

    }

这是我的小提琴：https : //jsfiddle.net/Bhavesh21/1haokeum/5/ aliceblue div 是工作区，您可以将设备和反应物拖到工作区。如果您首先将 SampleTestTube 拖到工作区，然后将试剂拖到其上，则与图像关联的侦听器不起作用。

另一方面，如果您将 Reagent 直接拖到设备中的 SampleTestTube 上，它就可以工作。

4

1 回答 1

1

当您在工作区中放置一个项目时，您实际上是手动创建了它的副本。但是这个副本没有附加侦听器（因为当您搜索所有.Droppable2项目并将放置侦听器附加到它们时副本不存在）。

您所要做的就是将用于 .Droppable2 的相同事件侦听器附加到您的副本：

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：我只是复制/粘贴了您为附加drop侦听器所做的代码，但将其放入函数中并调用该函数可能更清楚。

NB2：您的代码中有错误，我没有修复它们，但至少您的工作区中有您的子侦听器。

于 2020-06-05T10:58:17.667 回答