useDragDrop hook that handles DragStart, DragOver and Drop operations

useDragDrop.ts

import React from 'react';

const handleDragStart = (event: React.DragEvent) => {
    event.dataTransfer.effectAllowed = 'move';
    event.dataTransfer.setData(
        'text/plain',
        event.currentTarget.getAttribute('data-index'),
    );
};

const handleDragOver = (event: React.DragEvent) => {
    event.preventDefault();
    event.dataTransfer.effectAllowed = 'move';
};

const handleDrop = (event: React.DragEvent) => {
    event.persist();
    event.preventDefault();

    const dragStartIndex = parseInt(event.dataTransfer.getData('text/plain'));
    const dragEndIndex = parseInt(event.currentTarget.getAttribute('data-index'),
    );

    return {
        dragStartIndex,
        dragEndIndex,
    };
};

export const useDragDrop = () => {
    return {
        handleDragStart,
        handleDragOver,
        handleDrop,
    };
};