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

Question

I am currently working on a website that uses the drag-and-drop functions of modern browsers in order to upload a file to a server with an ajax-call.

I am using the jQuery-Library and bind the appropriate events. There are a lot of them: dragstart, dragenter, dragover, dragleave etc...

I was wondering if I could only allow dragging files from "outside the browser". At the moment I have the problem that dom-elements are also draggable to my drop-area.

Is there any technical method to distinguish between external drags (outside -> browser) and internal drags (dom-element to dom-element)?

Answer 1

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

Answer 2

At my case, I found a solution, using the html5 attributes changed to react I could filter only the type I needed...

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>

at my case, I worked only with start event but you can use the others html5 api methods to fill your needs, I guess :)

This link helped me a lot https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets