Question

我目前正在开发一个使用现代浏览器拖放功能的网站，以便将文件上传到带有ajax调用的服务器。

我正在使用jQuery-Library并绑定适当的事件。其中有很多：dragstart，dragenter，dragover，dragleave等...

我想知道我是否只允许在浏览器之外拖动文件＆＃34;。目前我遇到的问题是，dom-elements也可以拖放到我的丢弃区域。

是否有任何技术方法可以区分外部拖动（外部 - >浏览器）和内部拖动（dom-element到dom-element）？

Answer 1

就我而言，我找到了一个解决方案，使用更改后的html5属性来做出反应，我只能过滤所需的类型...

function checkDrag(event) {    
  if (event.dataTransfer.types[0] === 'Files') {
    //what you want do to
  }    
}

<Wrapper
  className="wrapper-body"
  onDragEnter={event => checkDrag(event)}
  ondragover={event => checkDrag(event)}
>
{Content} 
<Wrapper>

就我而言，我只处理start事件，但是我想您可以使用其他html5 api方法来满足您的需求：）

此链接对我有很大帮助https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets

Answer 2

你可以改变你的想法，浏览器拖动文件有后缀，你可以确定文件名是否在拖动后有后缀。

jQuery拖动;丢弃 - 仅允许来自浏览器外部的药物

2 个答案: