防止拖动本地代码/项目触发draenter

Posted 2023-05-08

【中文标题】防止拖动本地代码/项目触发draenter

【英文标题】：Prevent drag of local code/items from triggering dragenter

【发布时间】：2012-01-17 17:19:00

【问题描述】：

我正在构建一个 html5 文件上传，我希望在用户将文件拖到窗口上时触发 dragenter。这个想法是 dragenter 将触发灯箱样式覆盖，显示放置区域。

这是我的代码。 (jQuery)

$(window).bind('dragenter', function (e) 
    e.stopPropagation();
    e.preventDefault();
    $('#uploadWrapper').show();
).bind('dragexit', function (e) 
    e.stopPropagation();
    e.preventDefault();
    $('#uploadWrapper').hide();
);

这很好用，但是如果用户抓取图像或一些文本并拖动它，它也会触发 dragenter 事件。有没有办法告诉我正在拖动什么，所以只有实际文件上传触发显示覆盖？

谢谢..

【参考方案1】：

我认为像下面这样的东西应该可以工作； （虽然我认为它对 Opera 不友好。）

function DraggedFiles(e)

    for (n in e.dataTransfer.types)
    
        if (e.dataTransfer.types[n] === "Files") return true;
    

    return false;

然后，对于您的 dragEnter 事件，只需添加：

if (DraggedFiles(e))

    // files were dragged onto here
 else 
    // something other than files were dragged

您要在哪里进行检查并采取行动/不采取行动。

【讨论】：

可悲的是，e.dataTransfer 似乎在 dragenter 事件中未定义。 jQuery(window).bind('dragenter', function (e) console.log(e.dataTransfer); )

啊，这是 jQuery 造成的问题...您需要通过 event.originalEvent.dataTransfer 访问它，我认为：Event Object - jQuery API。向下滚动到“其他属性”部分。

耶！就是这样！现在感觉很愚蠢，因为我应该发现这一点！ for(n in... 代码中的小错字应该是 for(i in...