我目前正在开发一个使用现代浏览器拖放功能的网站,以便将文件上传到带有ajax调用的服务器。
我正在使用jQuery-Library并绑定适当的事件。其中有很多:dragstart,dragenter,dragover,dragleave等...
我想知道我是否只允许在浏览器之外拖动文件"。目前我遇到的问题是,dom-elements也可以拖放到我的丢弃区域。
是否有任何技术方法可以区分外部拖动(外部 - >浏览器)和内部拖动(dom-element到dom-element)?
答案 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)
你可以改变你的想法,浏览器拖动文件有后缀,你可以确定文件名是否在拖动后有后缀。