1. Drag is added to the DOM element that you want to drag
  2. DragPreview affects the number of DOM elements that actually follow the mouse on the page when the DOM element is dragged, visually
  3. Multiple Drag Only the last drag is valid
  4. Single Drag and single dragPreview – The DOM elements bound to drag and dragPreview have a parent-child relationship, so visually the element that follows the mouse over the page will be the parent element and all of its children
import React from 'react';
import { useDrag } from 'react-dnd';
const TestDrag = () = > {
  const [{ opacity }, drag, dragPreview] = useDrag({
    item: { type: 'drag' },
    collect(monitor) {
      return { opacity: monitor.isDragging() ? 0.4 : 1}}})return (
    <div style={{ paddingLeft: 200.paddingTop: 300}} >
      <div className="dragBox" style={{ width: 300.height: 200.background: 'lightBlue'}}ref={dragPreview}>
        <span>This is the inline element span</span>
        <p>This is the block-level element P</p>
        <div className="drag" ref={drag} style={{ width: 200.height : 100.backgroundColor: 'lightgreen', opacity}} >This is a drag</div>
      </div>
    </div>)}export default TestDrag;
Copy the code

5. Single Drag and single dragPreview — The elements bound to drag and dragPreview have no parent-child relationship, so visually the elements that follow the mouse on the page will be the DOM elements bound to dragPreview

import React from 'react';
import { useDrag } from 'react-dnd';
const TestDrag = () = > {
  const [{ opacity }, drag, dragPreview] = useDrag({
    item: { type: 'drag' },
    collect(monitor) {
      return { opacity: monitor.isDragging() ? 0.4 : 1}}})return (
    <div style={{ paddingLeft: 200.paddingTop: 300}} >
      <div className="drag" ref={drag} style={{ width: 200.height : 100.backgroundColor: 'lightgreen', opacity}} >This is a drag</div>
      <div className="dragBox" style={{ width: 300.height: 200.background: 'lightBlue'}}ref={dragPreview}>
        <span>This is the inline element span</span>
        <p>This is the block-level element P</p>
      </div>
    </div>)}export default TestDrag;
Copy the code

6. Single Drag and Multiple dragPreview — If multiple dragPreviews are bound to the parent element of the Drag element, then visually the element that follows the mouse on the top of the page will be the outermost parent element and all its children

import React from 'react';
import { useDrag } from 'react-dnd';

const TestDrag = () = > {
  const [{ opacity }, drag, dragPreview] = useDrag({
    item: { type: 'drag' },
    collect(monitor) {
      return { opacity: monitor.isDragging() ? 0.4 : 1}}})return (
    <div style={{ paddingLeft: 200.paddingTop: 300}} >
      <div style={{ width: 400.height: 300.background: 'cyan' }}>
        <div style={{ width: 350.height: 250.background: 'brown'}}ref={dragPreview}>
          <div className="dragBox" style={{ width: 300.height: 200.background: 'lightBlue'}}ref={dragPreview}>
            <span>This is the inline element span</span>
            <p>This is the block-level element P</p>
            <div className="drag" ref={drag} style={{ width: 200.height : 100.backgroundColor: 'lightgreen', opacity}} >This is a drag</div>
          </div>
        </div>
      </div>
    </div>)}export default TestDrag;
Copy the code

7. Single drag and multiple dragPreview — If multiple dragPreview DOM elements that do not have a parent relationship with the drag element are placed in front of the drag, the effect is the same as (6)

import React from 'react';
import { useDrag } from 'react-dnd';
const TestDrag = () = > {
  const [{ opacity }, drag, dragPreview] = useDrag({
    item: { type: 'drag' },
    collect(monitor) {
      return { opacity: monitor.isDragging() ? 0.4 : 1}}})return (
    <div style={{ paddingLeft: 200.paddingTop: 300}} >
      <div style={{ width: 400.height: 300.background: 'orange'}}ref={dragPreview}>The solo dragPreview</div>
      <div style={{ width: 400.height: 300.background: 'cyan' }}>
        <div style={{ width: 350.height: 250.background: 'brown'}}ref={dragPreview}>
          <div className="dragBox" style={{ width: 300.height: 200.background: 'lightBlue'}}ref={dragPreview}>
            <span>This is the inline element span</span>
            <p>This is the block-level element P</p>
            <div className="drag" ref={drag} style={{ width: 200.height : 100.backgroundColor: 'lightgreen', opacity}} >This is a drag</div>
          </div>
        </div>
      </div>
    </div>)}export default TestDrag;
Copy the code

8. Single drag and multiple dragPreview — If the last dragPreview has no parent relationship to the drag element and is at the end of the row, the effect is the same as (5)

import React from 'react';
import { useDrag } from 'react-dnd';
const TestDrag = () = > {
  const [{ opacity }, drag, dragPreview] = useDrag({
    item: { type: 'drag' },
    collect(monitor) {
      return { opacity: monitor.isDragging() ? 0.4 : 1}}})return (
    <div style={{ paddingLeft: 200.paddingTop: 300}} >
      <div style={{ width: 400.height: 300.background: 'cyan' }}>
        <div style={{ width: 350.height: 250.background: 'brown'}}ref={dragPreview}>
          <div className="dragBox" style={{ width: 300.height: 200.background: 'lightBlue'}}ref={dragPreview}>
            <span>This is the inline element span</span>
            <p>This is the block-level element P</p>
            <div className="drag" ref={drag} style={{ width: 200.height : 100.backgroundColor: 'lightgreen', opacity}} >This is a drag</div>
          </div>
        </div>
      </div>
      <div style={{ width: 400.height: 300.background: 'orange'}}ref={dragPreview}>The solo dragPreview</div>
    </div>)}export default TestDrag;
Copy the code