Javascript - SVG上的文件丢弃触发ondragleave而不是ondrop

Question

我试图在放入div的SVG圈子上触发放置事件（我也称之为事件ondragover，ondragleave和ondrop，一切正常）。 圈子上的ondragover和ondragleave事件正常，但ondrop事件会触发ondragleave而不是ondrop。除此之外，当我在圆圈上拖动一个图像时，鼠标指针显示我无法通过＆＃34;阻止＆＃34;指针。 我不知道第一个问题可能是什么，但第二个问题可能就是我用圆圈填充图像并且它不能将图像放在另一个图像上？我已经尝试使用event.preventDefault()，但它不起作用。

Answer 1

你需要在dragover（ondragover）事件处理程序中调用preventDefault（）。

示例：

let svg = document.getElementById('svg')
svg.addEventListener('dragover', e => { e.preventDefault(); console.log('dragover') })
svg.addEventListener('dragleave', () => { console.log('dragleave') })
svg.addEventListener('drop', e => { e.preventDefault(); console.log('drop') })

<div>
  <img id="svg" width="200" height="200" src="https://upload.wikimedia.org/wikipedia/commons/a/a0/Circle_-_black_simple.svg">
</div>
<hr>
<img width="200" height="200" src="https://upload.wikimedia.org/wikipedia/commons/9/91/Fxemoji_u1F431.svg">

另一个例子： https://www.w3schools.com/html/html5_draganddrop.asp