当我拖动一个项目时，拖放 'dragover' 事件以捕获可拖动的父项而不是子项？里面的简单例子

Question

我在下面提供的代码功能齐全。当您将一个项目拖到另一个项目上时，dragover 事件会捕获并显示它。

要理解我的意思，请自行尝试：https://jsfiddle.net/athanasis/oydbrsxt/2/

我不喜欢的行为：使用我的代码，尝试将任何项目拖到列表中的任何“子内容”或“内容”字样。 dragover 事件捕获并显示该元素的文本，而不是父可拖动 li 元素的文本。

Javascript（纯）：

<script>
  document.addEventListener('dragover', function (event) { allowDrop(event); }, true);
    function allowDrop(ev) 
    {   el = ev.target;
        document.getElementById("result").innerHTML = el.innerHTML;
    }    
</script>

HTML:

<div id="result">CLICK AND DRAG ON ANOTHER ITEM</div>
<ul>Category 1 
    <li draggable="true">item 1 <span> Content 1 <span> Sub-Content 1</span> </span> </li>
    <li draggable="true">item 2 <span> Content 2 <span> Sub-Content 2</span> </span> </li>     
    <li draggable="true">item 3 <span> Content 3 <span> Sub-Content 3</span> </span> </li>
    <li draggable="true">item 4 <span> Content 4 <span> Sub-Content 4</span> </span> </li>
    <li draggable="true">item 5 <span> Content 5 <span> Sub-Content 5</span> </span> </li>
</ul>

当我拖到任何子元素而不是子元素本身时，关于如何捕获和显示 父元素 的任何想法???

Answer 1

我们可以往上爬，直到我们对结果满意为止：

document.addEventListener('dragover', function (event) { allowDrop(event); }, true);
    function allowDrop(ev) 
    {   el = ev.target;
            while ((el.tagName !== "LI") && (el.tagName !== "BODY")) el = el.parentNode;
        document.getElementById("result").innerHTML = el.innerHTML;
    }

Fiddle: https://jsfiddle.net/Lnrt2zx1/

当我拖动一个项目时，拖放 'dragover' 事件以捕获可拖动的父项而不是子项？里面的简单例子

Drag and Drop 'dragover' event to catch the draggable parent and not the child when I drag over an item? Simple Example Inside

html

javascript

drag-and-drop