jQuery 拖放 - 只允许从浏览器外部拖动

Posted 2023-05-08

【中文标题】jQuery 拖放 - 只允许从浏览器外部拖动

【英文标题】：jQuery Drag & Drop - only allow drags from outside the browser

【发布时间】：2014-11-12 04:34:32

【问题描述】：

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

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

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

有什么技术方法可以区分外部拖拽（外部->浏览器）和内部拖拽（dom-element to dom-element）？

【问题讨论】：

发布一些代码示例。使用draggable="false"，您可以禁用 DOM 元素的拖动。

是的，显示您现有的代码。大多数 DOM 元素默认情况下是不可拖动的。

好的，我只是在这里创建了一个小例子：jsfiddle.net/ge44j2wc/8

【参考方案1】：

你可以换个思路，浏览器拖拽文件有后缀，拖拽后可以判断文件名是否有后缀。

【讨论】：

后缀是什么意思？拖动文件的文件扩展名？我已经仔细检查了不同事件中可用的不同对象。但是我没有看到任何后缀。

【参考方案2】：

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