javascript - 防止默认将图像拖放到浏览器中

Question

我已经为此搜索了一段时间，但我能找到的只是如何启动拖放，或者如果您正在使用该特定库，如何防止拖放。

我有一个运行良好的拖放区，但当用户错过拖放区并不小心将其拖到页面页眉或页脚中时，就会出现问题。浏览器执行默认行为，仅在浏览器中加载图像。

有没有办法阻止用户将图像拖到那些 div 中？

我是这样抓元素的

$(window.parent.document.body).find('#header-content')
$(window.parent.document.body).find('#footer-content')

我已经尝试附加阻止默认值等，但到目前为止还没有成功。我应该提到我以这种方式获取这些元素，因为我正在使用 iframe(讨厌!!!)，这是确保我拥有正确元素的最干净的方法。

Answer 1

这是一个 javascript 解决方案，您可以随意将其重写为 jQuery:

myElement.addEventListener("dragover", function(e) {
  e.preventDefault();
}, false);
myElement.addEventListener("drop", function(e) {
  e.preventDefault();
}, false);

将 myElement 替换为您的 DOM 元素。您需要 dragover 和 drop 元素来可靠地防止这种行为。