Drag and Drop in React

#react #typescript

In this example it was created whit React and typescript

Drag and drop area

<div
  onDrop={handleDrop}
  onDragOver={handleDragOver}
  onDragEnter={handleDragEnter}
  onDragLeave={handleDragLeave}
>
</div>

Actions

  const handleDragOver = ( e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDragEnter = ( e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
  };

  const handleDragLeave = ( e: DragEvent<HTMLDivElement>) => {
    e.preventDefault();
    e.stopPropagation();
 };

 const handleDrop = ( e: DragEvent<any>) => {
    e.preventDefault();
    e.stopPropagation();
    // the 'files' constant contains the documents
    const files = e.dataTransfer.files;
 };