JavaScript 模块模式和拖放 API

Posted 2023-05-08

【中文标题】JavaScript 模块模式和拖放 API

【英文标题】：JavaScript Module pattern and Drag and Drop API

【发布时间】：2016-06-13 17:51:24

【问题描述】：

我在 js 中有一个示例模块，该模块用于管理拖放文件上传。 该代码似乎适用于“dragenter”事件函数，但是当我删除文件时，“drop”事件应该调用被删除的函数，代码总是转发到文件路径。

这里是代码示例

var testModule = (function testBuilder()
    function call(evt) 
        evt.preventDefault();
        console.log('works');
    

    function dropped(evt) 
      evt.preventDefault();
      console.log('file dropped');
    

    var element = document.getElementById('testBlock');

    function init() 
      element.addEventListener('dragenter', call, false); 
      element.addEventListener('drop', dropped, false);
    

    publicAPI = 
        init: init
    ;

    return publicAPI;
)();

window.onload = function() 
    testModule.init();
;

这里有一个 jsbin https://jsbin.com/redixucate/edit?js,console,output

如果有人能弄清楚为什么它不断重定向文件路径，我将不胜感激。

【参考方案1】：

使用 preventDefault 添加 'dragover' 事件，它应该可以工作。

在你的 init() 中：

element.addEventListener('dragover', over, false);

及以上功能：

function over(e)  
   e = e || window.event; 
   if(e.preventDefault) 
     e.preventDefault();
    

还为您的其他两个功能添加相同的预防措施..

见https://jsbin.com/xemovariwu/1/edit?js,console,output

另见this问题/答案。

【讨论】：

成功了。似乎我需要先取消拖动，然后才能取消放置。需要在文档中更多地关注我，看看他们是否涵盖了这一点。