# Day 24 - Drag & Drop

## 參考
- [React DnD | 實現可拖曳的任務牆](https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/react-dnd-implement-task-board-16ce7f67289c)
- [Task Board](https://codesandbox.io/s/task-board-41d03?from-embed)
- 延伸: Azure Scrum Task Board
- [Antd-Table-Drag](https://ant.design/components/table#components-table-demo-drag-sorting)
- Drag sorting
- Drag sorting with handler
- key word: dnd-kit
- [{A} Table CRUD](
https://youtu.be/y4_nSE-aZhc?si=kmDiULzS-jLGfCex)
- [{A} Editable Table Cells](https://youtu.be/Kifluk4YGDc?si=QICrVFpOMmair7uN)
## 應用 - 調整出賽順序
> 假設賽制對於單雙點數一樣

* EX#1: 風城盃:雙打x3
* EX#2: 園區盃:雙打x3 & 單打x2

> 風城盃-蔬菜團隊 (6人)
1. VGT (貝吉塔)
2. Cousin (表哥)
3. Goish (馬鈴薯)
4. Allen (阿良)
5. Engine
6. 毅力

## 結果

- v1 - Drag sorting
- v2 - Drag sorting with handler

## key note
> Code 收錄於分支: [feature/dragDrop](https://github.com/goish135/table-tennis-king/tree/feature/dragDrop)

1. npm i `dnd-like`
2. import

    import {
      DndContext,
      PointerSensor,
      useSensor,
      useSensors,
    } from "@dnd-kit/core";
    import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
    import {
      SortableContext,
      arrayMove,
      useSortable,
      verticalListSortingStrategy,
    } from "@dnd-kit/sortable";
    import { CSS } from "@dnd-kit/utilities";

3. Table columns add `key: 'sort'`

    const columns = [
      {
        key: 'sort',
      },
      {
        title: "NO#",
        dataIndex: "no",
      },  
      {
        title: "Name",
        dataIndex: "name",
      }
    ];

4. to be add Table component - `Row`

   import { MenuOutlined } from '@ant-design/icons';

    const Row = ({ children, ...props }) => {
      const {
        attributes,
        listeners,
        setNodeRef,
        setActivatorNodeRef,
        transform,
        transition,
        isDragging,
      } = useSortable({
        id: props['data-row-key'],
      });
      const style = {
        ...props.style,
        transform: CSS.Transform.toString(
          transform && {
            ...transform,
            scaleY: 1,
          },
        ),
        transition,
        ...(isDragging
          ? {
              position: 'relative',
              zIndex: 9999,
            }
          : {}),
      };
      return (
        <tr {...props} ref={setNodeRef} style={style} {...attributes}>
          {React.Children.map(children, (child) => {
            if (child.key === 'sort') {
              return React.cloneElement(child, {
                children: (
                  <MenuOutlined
                    ref={setActivatorNodeRef}
                    style={{
                      touchAction: 'none',
                      cursor: 'move',
                    }}
                    {...listeners}
                  />
                ),
              });
            }
            return child;
          })}
        </tr>
      );
    };

5. In App Section - sensors, onDragEnd

6. In App Section - DndContext, SortableContext, Table