我想知道当一个元素被拖动并掉到其父体之外时，如何检测？
element.addEventListener('dragend', function(event) {
// check if element is dropped outside its parent
}, false)
该技术通过以下方式识别被拖动的元素是否被放置在其父元素内。
dragParent 元素时的'拖动开始'。event.target 以确定投放目标dragParent// the parent of the dragged element
let dragParent = null;
function handleDragstart(ev) {
dragParent = ev.target.parentElement;
dragParent.addEventListener('dragover', handleDragover);
dragParent.addEventListener('drop', handleDrop);
}
function handleDrop(ev) {
ev.preventDefault();
ev.stopPropagation();
// search up DOM tree for dragParent
for (let el = ev.target; el.tagName !== 'HTML';
el = el.parentElement) {
if (el === dragParent) {
alert('#p1 was dropped inside dragParent');
return;
}
}
alert('#p1 was dropped outside dragParent');
}
function handleDragover(ev) {
ev.preventDefault();
}
function handleDragend(ev) {}
const p1 = document.getElementById('p1');
p1.addEventListener('dragstart', handleDragstart);
p1.addEventListener('dragend', handleDragend);
const sibling = document.getElementById('sibling');
sibling.addEventListener('dragover', handleDragover);
sibling.addEventListener('drop', handleDrop);
let stranger = document.getElementById('stranger');
stranger.addEventListener('dragover', handleDragover);
stranger.addEventListener('drop', handleDrop);
let body = document.body;
body.addEventListener('dragover', handleDragover);
body.addEventListener('drop', handleDrop);body {
margin: 0;
padding: 0.4rem;
height: 100vh;
width: 100vw;
}
#parent {
background-color: #ddd;
width: 90%;
padding: 0.3rem;
}
#p1 {
background-color: white;
padding: 0.1rem;
width: 12rem;
}
#sibling {
background-color: #bbb;
width: 15rem;
height: 3rem;
}
#stranger {
background-color: #ddd;
margin: 0.5rem 0;
width: 90%;
height: 80px;
padding: 0.3rem;
}<body>
body
<h3>Drop #p1 inside or outside #parent</h3>
<div id="parent">
#parent
<p id="p1" draggable="true">
#p1 (draggable)
</p>
<div id="sibling">
#sibling
</div>
</div>
<div id="stranger">
#stranger
</div>
</body>