When using React-beautiuly-dnd, I did not find a quick tutorial in Chinese, so here is a brief introduction to how to implement drag and drop between two lists. It can only be regarded as a study note 😂

react-beautiful-dnd

0, Demo

The Demo address

1, install,

# yarn
yarn add react-beautiful-dnd

# npm
npm install react-beautiful-dnd --save
Copy the code

2. Basic usage

To implement drag and drop between two lists, you need to understand three main package components

DragDropContext

The drag context is the component that wraps the list we want to drag.
and
must be placed in this component.

usage

<DragDropContext
  onDragStart={this.onDragStart}// Drag beginsonDragUpdate={this.onDragUpdate}// Drag changesonDragEnd={this.onDragEnd}// Drag end >
  <Droppable />
</DragDropContext>
Copy the code

Where OnDragEnd is the drag-end event, which must be passed as a parameter.

onDragEnd = result= > {
  / / the result parameters
  /* {draggableId: "item-1" drag element id source: {index: 1, // draggableId: "source" // original list id} destination: {index: 1, // drop the element to the place where the list is placed droppableId: "destination" // Place the list Id}... } * /
  // Process the list data according to the source and destination of result, complete the drag operation
}
Copy the code

Droppable

A deployable component that wraps a list that can be placed by a drag element.

usage

<Droppable droppableId="droppable">
  {(provided, snapshot) => (
    <div
      ref={provided.innerRef}
      style={{ backgroundColor: snapshot.isDraggingOver ? 'blue' : 'grey'}} {. provided.droppableProps}
    >
      <Draggable />
    </div>
  )}
</Droppable>
Copy the code

Only functions are accepted internally, with some mandatory parameters.

  • droppableIdMandatory parameter that identifies the unique drop component Id that will be used in drag-and-drop events.
  • providedProvide props for internal tags
    • innerRefGet the ref, the funtion component is ref, and the class component is innerRef
    • droppablePropsMandatory argument that provides a list of arguments that can be placed, which can be expanded on the internal root node
  • snapshotThe snapshot
    • isDraggingOverIs there a drag component passing by
    • draggingOverWithId of the dragged element being dragged by

Draggable

Draggable component, which wraps elements that need to be dragged.

usage

<Draggable draggableId={id} index={index}>
  {(provided, snapshot) => (
    <div
      {. provided.dragHandleProps}
      {. provided.draggableProps}
      ref={provided.innerRef}
    >.</div>
  )}
</Draggable>
Copy the code

Only functions are accepted internally, with some mandatory parameters.

  • draggableIdMandatory parameter that identifies the unique drag element Id used in events triggered by drag.
  • indexYou must pass a drag element subscript to identify the position of the drag element in the list
  • providedProvide props for internal tags
    • innerRefGet the ref, the funtion component is ref, and the class component is innerRef
    • draggablePropsMandatory parameters that provide the parameters of the elements that can be dragged, which can be expanded on the internal root node
    • dragHandlePropsMandatory parameter, bound to a component that can be clicked and dragged
  • snapshotThe snapshot
    • isDraggingWhether dragging is in progress
    • draggingOverId of the drop component that drags the element past

Add an extra parameter in use: isDragDisabled, when set to true, the element will not be dragged.