Dragging desktop icons

[DustinBrett]

In my old v1 OS I allowed dragging icons anywhere, but I didnt store position. Now I store order but I dont allow dragging. Id like to bring drag support back, possibly using framer or react-rnd again. Possibly I would only allow it to snap to grid on drop so that I could more easily store position on the css grid.

[DustinBrett]

Random code dump of my current plan which doesn't support multiple files and basically still doesn't work. Just adding this here to prove I am onto something. I think I may wanna change drag animation to be handled by Framer as I already have the dep and it has some cool effects.

if (fileManagerRef.current && target instanceof HTMLElement) {
	const { columnStart, rowStart } = calcGridPosition(clientX, clientY);

	gridPositions.current[
	  [...fileManagerRef.current.childNodes].indexOf(target)
	] = { columnStart, rowStart };
}

  type GridPosition = { columnStart: number; rowStart: number };
  const { sizes } = useTheme();
  const calcGridPosition = useCallback(
    (x: number, y: number): GridPosition => {
      const columnStart =
        Math.floor(
          x /
            (pxToNum(sizes.fileManager.gridEntryWidth) +
              pxToNum(sizes.fileManager.columnGap))
        ) + 1;
      const rowStart =
        Math.floor(
          y /
            (pxToNum(sizes.fileManager.gridEntryHeight) +
              pxToNum(sizes.fileManager.rowGap))
        ) + 1;

      return { columnStart, rowStart };
    },
    [
      sizes.fileManager.columnGap,
      sizes.fileManager.gridEntryHeight,
      sizes.fileManager.gridEntryWidth,
      sizes.fileManager.rowGap,
    ]
  );
  const gridPositions = useRef<GridPosition[]>([]);
  const buildGridPositionLayout = useCallback((): void => {
    if (fileManagerRef.current) {
      ([...fileManagerRef.current.childNodes] as HTMLLIElement[]).forEach(
        (li, index) => {
          const { x, y } = li.getBoundingClientRect();
          const { columnStart, rowStart } = calcGridPosition(x, y);

          gridPositions.current[index] = { columnStart, rowStart };
        }
      );
    }
  }, [calcGridPosition, fileManagerRef]);

  useEffect(() => buildGridPositionLayout(), [buildGridPositionLayout]);

  style: gridPositions.current[index]
  ? {
      gridColumnStart: gridPositions.current[index].columnStart,
      gridRowStart: gridPositions.current[index].rowStart,
    }
  : undefined,

[DustinBrett]

This has been added as of a month or so ago.