下面我展示的代码是完全功能的。 当您将一个项目拖动到另一个项目上时，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>
当我拖动到任何子元素而不是子元素本身时，我如何捕获并显示父元素？？？
我们可以往上爬，直到对结果满意为止:
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/
