丢弃事件不阻止默认答案

【问题标题】：Drop Event Not Preventing Default丢弃事件不阻止默认
【发布时间】：2013-01-14 20:00:52
【问题描述】：

function dragEnter(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $(evt.target).addClass('over');
}

function dragLeave(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $(evt.target).removeClass('over');
}

function drop(evt) {
   evt.stopPropagation();
   evt.preventDefault();
   $(evt.target).removeClass('over');
}

jQuery( function ( $ ) {

  var $box = $( "#box" );
  $box.bind("dragenter", dragEnter);
  $box.bind("dragleave", dragLeave);
  $box.bind("drop", drop);
});

我使用的是 Chrome 版本 24.0.1312.52 m 和最后一个 jQuery (1.8.3)。当我将文件放入框中时，浏览器不会阻止默认行为。你能帮帮我吗？

附： dragexit 已被弃用正确吗？

【问题讨论】：

它适用于我，我没有修改任何一行代码
Oo.. 在我更新 Chrome 之前它一直在工作：| Version 24.0.1312.52 m 现在它只是在浏览器中打开文件
K，我没疯。有什么办法吗？
@user1824269 我不确定.. 还在玩它。它只是工作，要粘贴我的 Chrome 浏览器版本.. 但它说我需要重新启动浏览器才能更新.. 一旦我重新启动它就不再工作了..

标签： javascript jquery google-chrome drag-and-drop jquery-events

【解决方案1】：

如果您希望在 Google Chrome 中触发 drop 事件，则必须先定义一个 dragover 侦听器，即使该函数根本不做任何事情。我不知道为什么，这很奇怪......但清楚地识别并且易于复制:) 昨天在那个 sh*t 上浪费了 2 个小时：/ 希望这会有所帮助

【讨论】：

我希望我能多次投票。谢谢谢谢谢谢！

【解决方案2】：

这应该可以为您解决问题。

jQuery( function ( $ ) {
    var $box = $( "#box" );
    $box.bind("dragenter", dragEnter);
    $box.bind("dragleave", dragLeave);
    $box.bind("drop", drop);

    $(document).bind('dragover', function (e) {
         e.preventDefault();
    });
});

【讨论】：

您的解决方案似乎不适用于 jsfiddle。顺便说一句，要停止冒泡，您需要使用 e.stopPropagation()，而不是 e.preventDefault()
在 jsfiddle 之外为我工作，我认为这是因为 dragover 事件。我应该添加停止传播方法吗？
是的。您不必防止掉落。更新了我的答案。我只是在打字。我没有尝试。 :(

【解决方案3】：

这是一个老问题，但我使用了这个问题的答案并编写了我想要的代码：

HTML：

<div id="image_holder" ondragover="dragEnter(this,event)"></div>

jQuery:

function dragEnter(a,evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $(evt.target).addClass('over');

    $(a).bind("dragleave", dragLeave);
    $(a).bind("drop", drop);

    $(document).bind('dragover', function (e) {
        e.stopPropagation();
        e.preventDefault();
    });
    return false;
}

function dragLeave(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $(evt.target).removeClass('over');
    return false;
}

function drop(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    $(evt.target).removeClass('over');
}

您可以轻松地将其用于页面中的不同元素。

【讨论】：