Question

我正在开发一个Angular JS应用程序，它有HTML5文件输入按钮和拖放区域。只要文件浏览弹出窗口打开，我就需要禁用拖放区域。实现这一目标的最佳方法是什么？

Answer 1

以下是我刚刚为您制作的示例，这是一个更新的Google DnD控制器，我更高级，并添加了您想要的功能。

window.fileBrowserActive = false; //init the controller to false
function DnDFileController(selector, onDropCallback) {
   var el_ = document.querySelector(selector);//select our element
   var overCount = 0;//over count is 0
   this.dragenter = function(e) 
   {
       e.stopPropagation();//stop propagation and prevent the default action if any
       e.preventDefault();
       overCount++;//increment and assign the overCount var to 1
       if(fileBrowserActive == false)//if the fileBrowserAction is false we can add dropping class
       {
           el_.classList.add('dropping');
       }
       else  //else add error or none at all it's your choice
       {
           el_.classList.add('error');
       }
   };


   this.dragover = function(e) 
   {
       e.stopPropagation();
       e.preventDefault();
   };

   this.dragleave = function(e)
   {
       e.stopPropagation();
       e.preventDefault();
       if (--overCount <= 0) { //we decrement and assign overCount once if it's equal to or less than 0 remove the classes and assign overCount to 0 
          el_.classList.remove('dropping');
          el_.classList.remove('error');  
          overCount = 0;
       }
    };

   this.drop = function(e) {
      e.stopPropagation();
      e.preventDefault();
      el_.classList.remove('dropping');
      el_.classList.remove('error');
       if(fileBrowserActive === false)
       {  //if fileBrowserActive is false send the datatranser data to the callback
          onDropCallback(e.dataTransfer);
       }
       else 
       {  //else send false
           onDropCallback(false);
       }
   };
    el_.addEventListener('dragenter', this.dragenter, false);
    el_.addEventListener('dragover', this.dragover, false);
    el_.addEventListener('dragleave', this.dragleave, false);
    el_.addEventListener('drop', this.drop, false);

}
var isFileBrowserActive = function(e){
    fileBrowserActive = true; //once clicked on it is active 
    this.onchange = function(e){ //create the onchange listener
        if(e.target.value !== "") //if the value is not blank we keep it active
        {   //so now user can't DnD AND use the file browser
            fileBrowserActive = true;
        }
        else if(e.target.value == "") //if it is blank means they click cancel most likely
        {
            fileBrowserActive = false;//assign false back
        }  //remove the listener 
        this.removeEventListener('change',this.onchange,false);
    };
    //assign the listener for change
    this.addEventListener('change',this.onchange,false);
};

 var fB = document.getElementById('fileBrowser'); //grab our element for file input
 fB.addEventListener('click',isFileBrowserActive,false); //assign the click event
 var activation = new DnDFileController('#dragNDrop',function(e){ //grab our DnD element
                  console.log(e); //console log the e (either datatransfer || false)
                  });

查看This Fiddle以查看其工作原理

在HTML5文件浏览弹出窗口打开时禁用拖放

1 个答案: