在Drop目标上输入和离开自定义事件

Question

我有一个drop target div，它有一些嵌套的div，我将dragover事件添加到父div并添加＆＃39; drag-allow＆＃39;归因于嵌套的div。我想在鼠标进入或离开任何子div时添加自定义事件触发。

<div id="container">
   <div id="page1" drag-allow >
    Page #1
   </div>
   <div id="page2" drag-allow>
    Page #2
   </div>
   <div id="page3" drag-allow>
    Page #3
   </div>

    var ground = document.getElementById('container');
...
ground.addEventListener('dragover', function(e){
    evt.preventDefault();
    evt.stopPropagation();

    evt.target.id; // custom event will fire based on child div's id

}, false);

Answer 1

您需要再添加两个事件，例如

    ground.addEventListener('dragenter', function(e){
    if(e.target.nodeType == Node.ELEMENT_NODE && e.target.hasAttribute('drag-allow')){
        // this will check drop area is div and must have attribute drag-allow
        console.log(e.target);
    }
}, false);

ground.addEventListener('dragleave', function(e){
    // on leave event fires on every nested div like above event
}, false);