HTML5 Drag，防止拖动的图像在拖放时重定向答案

【问题标题】：HTML5 Drag, prevent a dragged image from redirecting when droppedHTML5 Drag，防止拖动的图像在拖放时重定向
【发布时间】：2014-05-31 00:51:40
【问题描述】：

我在这里使用 jQuery 文件上传器：http://blueimp.github.io/jQuery-File-Upload/

问题是。我在浏览器窗口 1 中运行了文件上传器。如果我随后打开浏览器窗口 2 并将图像从窗口 2 拖到窗口 1，则窗口 1 会重定向到该图像。

当浏览器窗口 2 将图像拖入其中时，如何防止窗口 1 重定向？

【问题讨论】：

标签： jquery html drag-and-drop

【解决方案1】：

我认为您可以通过以下方式阻止图像拖动：

$('img').on('dragstart', function(e) { e.preventDefault(); });

或尝试阻止丢弃时的默认行为：

$("html").on("dragover", function(e) { e.preventDefault();  e.stopPropagation(); });
$("html").on("drop", function(e) { e.preventDefault(); e.stopPropagation(); });

【讨论】：

它在到达 drop 之前重定向。 preventDefault 不适用于拖动启动
尝试添加dragover 和e.stopPropagation();。我刚刚在 chrome 中测试过，对我来说效果很好。

【解决方案2】：

将回调添加到您的放置目标，如下所示：

$('#a').on('dragover', function (e) {
    e.preventDefault();
});
$('#a').on('drop', function (e) {
    e.preventDefault();
});

它适用于我的 Chrome。

【讨论】：