React-beautiful-dnd drag-and-drop components you deserve

Elegant drag and drop components, great news!

Easy to get started, easy to make! | | | | | | | | | | | | | | |

0, play demo

The official demo

Demo collection, there is always a suitable for you ~

1, install,

yarn add react-beautiful-dnd
Copy the code

2. General overview

– Take a look at the official chart

There are only three things (all tags!!) , do not understand it does not matter roughly understand, the following will be introduced in detail

– How do the three brothers write

DragDropContext

• writing

Label the required components

import React, {useState} from "react";
import {DragDropContext} from "react-beautiful-dnd";

const TodoList = () = > {
  const dragEnd = (e) = > {
    // After the drag is complete
	  // Do something...
  };
  return (
    <DragDropContext
      onDragEnd={(e)= >} / / onDragUpdate dragEnd (e) = {(e) = > dragUpdate (e)} / / onDragStart = {(e) = > dragStart (e)} > {/ / you<Droppable/>Component}</DragDropContext>
  );
};

export default TodoList;
Copy the code

• api

The code above has onDragEnd and not only that but onDragStart, onDragUpdate

Used to handle the end, start, and drag callbacks respectively

So let’s look at e of these functions

// `onDragStart`
const start = {
  draggableId: 'task1'.type: 'TYPE'.source: {
    dropppableId: 'column1'.index: 0}}// `onDragUpdate`
constupdate = { ... start,destination: {
    dropppableId: 'column1'.index: 1}}// `onDragEnd`
constend = { ... update,reason: 'DROP'
}
Copy the code

Droppable

What are those up there?? How to place id and drag id? Let’s now look at our deployable component

• Each component has a droppableId parameter that identifies a unique placement Id (the one that appears in the three callbacks mentioned above, make sure it is unique)

• Accept only functions on the inside of the component. Officials say it gives developers more freedom to operate, but some necessary parameters must be written

  /* ** The framework of the funtion provided argument is written in the 
           tag. To provide internal props needed for the label "routines remember can be" * * 1, innerRef: get ref funtion component is ref, class components are innerRef * * 2, droppableProps: Provide props that can be placed, expanding at the root of function {... Provided. DroppableProps} ** 3, placeholder: Placeholder, placed at the bottom of the function root ** -snapshot parameter: this is a snapshot (reminds me of a mobx snapshot, but not the same, see below) */		
  {
    (provided, snapshot) = > (
      <div 
        ref={provided.innerRef}
        {. provided.droppableProps}
      >{/ / you<Draggable/>Component} {provided. The placeholder}</div>)}Copy the code

• Example:

import React from "react";
import {Droppable} from "react-beautiful-dnd";
import Task from "./task";

const Column = ({id, title, tasks}) = > (
  <>
    <Droppable droppableId={id}>
      {(provided, snapshot) => (
        <div ref={provided.innerRef} {. provided.droppableProps} >
          {tasks.map((task, index) => (
            <Task key={task.id} {. task} index={index} />
          ))}
          {provided.placeholder}
        </div>
      )}
    </Droppable>
  </>
);

export default Column;
Copy the code

Draggable

Place the component-set frame and drag it? The answer is of course

• First, we have a droppableId to make sure it’s unique, and we have one too! There is also an index

  • DraggableId ensures drag uniqueness and is called in the three callback functions
  • Index drag subscript: Drag and drop is basically moving positions up and down in a list. The index is used for sorting

• Only functions are accepted inside the component, much the same as above

  /* ** The frame of the funtion in the 
           tag */		
  {
    (provided, snapshot) = > (
    	<div
    	  ref={provided.innerRef}
     	  {. provided.dragHandleProps}
            {. provided.draggableProps}
  	>{// Drag component you want to render}</div>)}Copy the code

  • Provided parameter: provides props for internal tags

    • InnerRef: The ref funtion component is the ref, and the class component is innerRef

    • 2, draggableProps: provides props for dragging, expanding at the root of function {… provided.draggableProps}

    • 3. DragHandleProps: Bind to the component that you want to drag. Look at a scene)

      

      At this point we need to make a drag-and-sort list, but only on the top left corner of the head, no drag effect anywhere else

      Just add {… to the component you want to drag. Provided. DragHandleProps}

      {
        (provided, snapshot) = > (
        	<div
          	ref={provided.innerRef}
        	// - {. provided.dragHandleProps}
      	{. provided.draggableProps}
      	>
           	  {
      	      <div>
            		<Avature 
                        {. provided.dragHandleProps} / >
                	<OtherContent/>
           	      </div>
      	  }
        	</div>)}Copy the code

  • The snapshot parameter: this is a snapshot, the function also has, let’s take a look at what this does

    • So what’s in the parameters

      // snapshot in <Draggable/>
      const draggableSnapShot = {
        isDragging: true.draggingOver: 'column1'		// Drop through the droppableId of the deployable component
      }
      
      // snapshot in <Droppable/>
      const droppableSnapShot = {
        isDraggingOver: true.draggingOverWith: 'task1'	// is being dragged through my drag component ID, which is draggableId
      }
      Copy the code

    • Is it still hard to understand? Let’s break it down:

      For a draggable component, what matters when it is being dragged is what components are being placed

      For a deployable component, it is concerned with which draggable components are dragged through

• Example:

import React from "react";
import {Draggable} from "react-beautiful-dnd";

const Task = ({id, content, index}) = > {
  return (
    <div style={{margin: 3}} >
      <Draggable draggableId={id} index={index}>
        {(provided, snapshot) => (
          <div
            {. provided.dragHandleProps}
            {. provided.draggableProps}
            ref={provided.innerRef}
          >
            {// eslint-disable-next-line max-len
              <div style={{border: "2px solid #000", background: snapshot.isDragging?" #ccc":"lightgreen}} ">{content}</div>
            }</div>
        )}
      </Draggable>
    </div>
  );
};

export default Task;
Copy the code