+ Try quickly dragging around the green square in the center, and notice the initial delay between the square moving, and the grid resizing its rows and columns +1.
+
+
+
+
+
+
+ );
+}
+
+function Grid() {
+ const [state, setState] = createStore({
+ items: {
+ 1: { id: 1, row: 0, col: 0 },
+ 2: { id: 2, row: 13, col: 13 },
+ 3: { id: 3, row: 26, col: 26 },
+ },
+ beginDragSize: null,
+ });
+
+ const isDragActive = () => state.beginDragSize !== null;
+
+ const size = createMemo(() => {
+ if (isDragActive()) {
+ const { beginDragSize } = state;
+ return { rows: beginDragSize.rows + 1, cols: beginDragSize.rows + 1 };
+ }
+
+ let maxRow = 0, maxCol = 0;
+ for (const item of Object.values(state.items)) {
+ maxRow = Math.max(item.row + 1, maxRow);
+ maxCol = Math.max(item.col + 1, maxCol);
+ }
+ return { rows: maxRow, cols: maxCol };
+ });
+
+ // For use in Solid's , that re-renders all items that are
+ // unequal by a `===` check, we need to either memoize the `{ row, col }`
+ // objects to maintain the same references, or use a value type like a string.
+ // For simplicity, using a string.
+ const cells = () => {
+ const arr = [];
+ for (let row = 0; row < size().rows; row++) {
+ for (let col = 0; col < size().cols; col++) {
+ arr.push(`${row}-${col}`);
+ }
+ }
+ return arr;
+ };
+
+ const [, dndActions] = useDragDropContext();
+
+ dndActions.onDragStart(() => {
+ setState('beginDragSize', unwrap(size()));
+ });
+
+ dndActions.onDragEnd(() => {
+ setState('beginDragSize', null);
+ });
+
+ dndActions.onDragOver(({ draggable, droppable }) => {
+ if (!droppable) return;
+ const { row, col } = parseCellStr(droppable.id);
+
+ const item = state.items[draggable.id];
+ if (item.row === row && item.col === col) return;
+
+ setState('items', draggable.id, { row, col });
+ });
+
+ const items = () => Object.values(state.items);
+
+ return (
+