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>

关于当我拖到任何孩子而不是孩子本身上时如何捕获并显示 parent 元素的任何想法？

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

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

拖放'dragover'事件以捕获可拖动的父项，而不是子项，而不是子项？内部简单示例

1 个答案: