在放置目标时进入和离开自定义事件

Question

我有一个放置目标 div，其中有一些嵌套的 div，我将 dragover 事件添加到 parent div 并添加 'drag-allow' 属性嵌套 divs。我想在鼠标进入或离开任何 child 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);

在放置目标时进入和离开自定义事件

On Drop target enter and leave custom event

html

javascript

drag-and-drop

custom-controls