React Beautiful Dnd 快速使用筆記

$ npm i react-beautiful-dnd

import { DragDropContext } from 'react-beautiful-dnd';

<DragDropContext
  onDragEnd={() => {}}
>
  {/* Your target */}
</DragDropContext>

impoort { Droppable } from 'react-beautiful-dnd';

<Droppable droppableId="id">
  {
    provided => (
    	<List
        ref={provided.innerRef}
        {...provided.droppableProps}
      >
      	{provided.placeholder}
      </List>
    )
  }
</Droppable>

<Draggable
  draggableId={t.id}
  index={i}
 >
    {p => (
        <Item
        ref={p.innerRef}
        {...p.draggableProps}
        {...p.dragHandleProps}
        key={t.id}
      >
        {t.text}
        </Item>
    )}
  </Draggable>

// onDragEnd(result) result 資訊

const result = {
  draggableId: 1,
  type: 'TYPE',
  reson: 'DROP',
  source: {
    droppableId: 1,
    index: 0,
  },
  destination: {
    droppableId: 1,
    index: 1,
  }
}

onDragEnd={result => {
  const { source, destination, draggableId } = result;
  if (!destination) {
    return;
  }

  let arr = Array.from(this.state.todos);
  const [remove] = arr.splice(source.index, 1);
  arr.splice(destination.index, 0, remove);
  this.setState({
    todos: arr,
  });
}}

const draggableSnapshot = {
  isDragging: true,
  draggingOver: 'droppable-id'
}

const droppableSnapshot = {
  isDraggingOver: true,
  draggingOverWith: 'draggable-id'
}

// onDragStart
const start = {
  draggableId: 'draggalbe-id',
  type: 'TYPE',
  source: {
    droppableId: 'droppable-id',
    index: 0,
  }
}

// onDragUpdate
const update = {
  ...start,
  destination: {
    droppableId: 'droppable-id',
    index: 1,
  }
}