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

时间:2014-09-18 00:33:50

标签: javascript jquery drag-and-drop drag

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

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

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

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

2 个答案:

答案 0 :(得分: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

答案 1 :(得分:0)

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