ChecklistEditor.tsx

function useDragProps(id: string) {
  const [dragged, setDragged] = useState(false);
  const [over, setOver] = useState(false);
  const {startDrag, stopDrag, getDragged} = useContext(ChecklistManagerContext);
  const onDragStart = useCallback(
    (event: DragEvent<HTMLElement>) => {
      startDrag(id);
      event.dataTransfer.setData('text/plain', id);
      event.dataTransfer.effectAllowed = 'move';
      setDragged(true);
    },
    [id, startDrag]
  );
  const onDragEnd = useCallback(() => {
    setDragged(false);
    stopDrag();
  }, [stopDrag]);
  const onDragOver = useCallback(
    (event: DragEvent<HTMLElement>) => {
      if (getDragged() == null || getDragged() === id) {
        return;
      }
      event.preventDefault();
      event.dataTransfer.dropEffect = 'move';
    },
    [getDragged, id]
  );
  const onDragLeave = useCallback(() => {
    setOver(false);
  }, []);
  const onDragEnter = useCallback(
    (event: DragEvent<HTMLElement>) => {
      if (getDragged() == null || getDragged() === id) {
        return;
      }
      event.preventDefault();
      setOver(true);
    },
    [id, getDragged]
  );
  const onDrop = useCallback(
    (event: DragEvent<HTMLElement>) => {
      event.preventDefault();
      const target = event.dataTransfer.getData('text/plain');
      event.dataTransfer.clearData();
      console.log('ZZZZ - onDrop', id, target);
      setOver(false);
    },
    [id]
  );
  return {draggable: true, dragged, over, onDragStart, onDrop, onDragEnter, onDragOver, onDragEnd, onDragLeave};
}