Function useFileDragDrop

useFileDragDrop(options: UseFileDragDropOptions): UseFileDragDropResult

Hook for managing drag and drop file operations.

Parameters

options: UseFileDragDropOptions

Returns UseFileDragDropResult

Remarks

This hook manages the drag and drop state for moving files between folders. It supports both single file drag and multi-file drag (when files are selected).

Key features:

Single file drag: Drag any file to a folder
Multi-file drag: When multiple files are selected and you drag one of them, all selected files are moved together
Visual feedback: Track which folder is being hovered for highlight effects

Example

const {
  draggedFile,
  dragHoverFolderPath,
  handleDragStart,
  handleDragOver,
  handleDragEnterFolder,
  handleDragLeaveFolder,
  handleDropOnFolder,
} = useFileDragDrop({
  enableDragDrop: true,
  selectedFiles,
  onMove: fileCache.moveFiles,
  onRefresh: refreshFiles,
  onClearSelection: clearSelection,
});

// File row (draggable)
<TableRow
  draggable
  onDragStart={handleDragStart(file)}
>
  ...
</TableRow>

// Folder row (drop target)
<TableRow
  onDragEnter={handleDragEnterFolder(folder.path)}
  onDragOver={handleDragOver}
  onDragLeave={handleDragLeaveFolder}
  onDrop={handleDropOnFolder(folder.path)}
  sx={{
    backgroundColor: dragHoverFolderPath === folder.path ? 'highlight' : undefined,
  }}
>
  ...
</TableRow>