Javascript jquerydrag&；Drop-仅允许从浏览器外部拖动

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

我正在使用jQuery库并绑定适当的事件。它们有很多：dragstart、dragenter、dragover、dragleave等等

我想知道我是否只允许从“浏览器外”拖动文件。目前我的问题是dom元素也可以拖到我的放置区域

---

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

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

在我的情况下，我找到了一个解决方案，使用更改为react的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>

函数检查拖动（事件）{
if（event.dataTransfer.types[0]=“Files”）{
//你想做什么
}    
}
选中拖动（事件）}
ondragover={event=>checkDrag（event）}
>
{Content}

在我的例子中，我只使用start事件，但我想您可以使用其他html5 api方法来满足您的需求：）

---

这个链接帮助了我很多

发布了一些代码示例。使用

draggable=“false”

可以禁用DOM元素的拖动。是的，显示现有代码。大多数DOM元素在默认情况下是不可拖动的。好吧，我在这里创建了一个小例子：后缀是什么意思？拖动文件的文件扩展名？我已经仔细检查了不同事件中可用的不同对象。但我没有看到任何后缀。