當我拖過一個項目時，拖放“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

我們可以 go 向上層級，直到我們對結果滿意：

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;
    }    

    

小提琴： https://jsfiddle.net/Lnrt2zx1/