react-dnd拖拽排序

短命女 2022-10-05 01:48 326阅读 0赞

App.js

import './App.css';
    import React, { useState, useCallback, memo, useMemo, useRef, Component } from 'react';
    import { DndProvider, useDrag, useDrop } from 'react-dnd';
    import { HTML5Backend } from 'react-dnd-html5-backend'
    import update from 'immutability-helper';
    import { name } from 'faker';
    import { CustomDragLayer } from './CustomDragLayer';
    import { snapToGrid as doSnapToGrid } from './snapToGrid';
    import { DraggableBox } from './DraggableBox';
    const ItemTypes = {
      CARD: 'card',
    }
    const style = {
      width: 400,
      marginRight:100,
    };
    
    const stylesDrag = {
      width: 300,
      height: 300,
      border: '1px solid black',
      position: 'relative',
    };
    
    const cardStyle = {
      border: '1px dashed gray',
      padding: '0.5rem 1rem',
      marginBottom: '.5rem',
      backgroundColor: 'white',
      cursor: 'move',
      width: 400,
    };
    
    
    function buildCardData() {
      const cardsById = {};
      const cardsByIndex = [];
      for (let i = 0; i < 10; i += 1) {
          const card = { id: i, text: name.findName() };
          cardsById[card.id] = card;
          cardsByIndex[i] = card;
      }
      return {
          cardsById,
          cardsByIndex,
      };
    }
    
    export const Card = memo(({ id, text, moveCard }) => {
      console.log('=======id, text, moveCard',id, text, moveCard)
      const ref = useRef(null);
      const [{ isDragging, handlerId }, connectDrag] = useDrag({
          type: ItemTypes.CARD,
          item: { id },
          collect: (monitor) => {
              const result = {
                  handlerId: monitor.getHandlerId(),
                  isDragging: monitor.isDragging(),
              };
              return result;
          },
      });
      const [, connectDrop] = useDrop({
          accept: ItemTypes.CARD,
          hover({ id: draggedId }) {
              if (draggedId !== id) {
                  moveCard(draggedId, id);
              }
          },
      });
      connectDrag(ref);
      connectDrop(ref);
      const opacity = isDragging ? 0 : 1;
      const containerStyle = useMemo(() => ({ ...cardStyle, opacity }), [opacity]);
      return (<div ref={ref} style={containerStyle} data-handler-id={handlerId}>
        {text}
      </div>);
    });
    
    export class Container extends Component {
      constructor(props) {
          super(props);
          this.drawFrame = () => {
              const nextState = update(this.state, this.pendingUpdateFn);
              this.setState(nextState);
              this.pendingUpdateFn = undefined;
              this.requestedFrame = undefined;
          };
          this.moveCard = (id, afterId) => {
              const { cardsById, cardsByIndex } = this.state;
              const card = cardsById[id];
              const afterCard = cardsById[afterId];
              const cardIndex = cardsByIndex.indexOf(card);
              const afterIndex = cardsByIndex.indexOf(afterCard);
              this.scheduleUpdate({
                  cardsByIndex: {
                      $splice: [
                          [cardIndex, 1],
                          [afterIndex, 0, card],
                      ],
                  },
              });
          };
          this.state = buildCardData();
      }
      componentWillUnmount() {
          if (this.requestedFrame !== undefined) {
              cancelAnimationFrame(this.requestedFrame);
          }
      }
      render() {
          const { cardsByIndex } = this.state;
          return (<>
          <div style={style}>
            {cardsByIndex.map((card) => (
              <Card key={card.id} id={card.id} text={card.text} moveCard={this.moveCard}/>
            ))}
          </div>
        </>);
      }
      scheduleUpdate(updateFn) {
          this.pendingUpdateFn = updateFn;
          if (!this.requestedFrame) {
              this.requestedFrame = requestAnimationFrame(this.drawFrame);
          }
      }
    }
    
    export const ContainerDrag = ({ snapToGrid }) => {
      const [boxes, setBoxes] = useState({
          a: { top: 20, left: 80, title: 'Drag me around' },
          b: { top: 180, left: 20, title: 'Drag me too' },
      });
    
      const moveBox = useCallback((id, left, top) => {
        console.log('=======id, left, top',id, left, top)
        console.log('=========boxes',boxes)
          setBoxes(update(boxes, {
              [id]: {
                  $merge: { left, top },
              },
          }));
      }, [boxes]);
      const [, drop] = useDrop(() => ({
          accept: 'box',
          drop(item, monitor) {
              const delta = monitor.getDifferenceFromInitialOffset();
              let left = Math.round(item.left + delta.x);
              let top = Math.round(item.top + delta.y);
              if (snapToGrid) {
                  ;
                  [left, top] = doSnapToGrid(left, top);
              }
              moveBox(item.id, left, top);
              return undefined;
          },
      }), [moveBox]);
      return (<div ref={drop} style={stylesDrag}>
        {Object.keys(boxes).map((key) => (<DraggableBox key={key} id={key} {...boxes[key]}/>))}
      </div>);
    };
    
    export const DragExample = () => {
      return (<div>
        <ContainerDrag snapToGrid={true}/>
        <CustomDragLayer snapToGrid={true}/>
      </div>);
    };
    
    function App() {
      return (
        <div className="App" style={
       {display:'flex'}}>
    			<DndProvider backend={HTML5Backend}>
            <Container />
            <DragExample />
    			</DndProvider>
    		</div>
      );
    }
    
    export default App;

CustomDragLayer

import { useDragLayer } from 'react-dnd';
    import { BoxDragPreview } from './BoxDragPreview';
    import { snapToGrid } from './snapToGrid';
    const layerStyles = {
        position: 'fixed',
        pointerEvents: 'none',
        zIndex: 100,
        left: 0,
        top: 0,
        width: '100%',
        height: '100%',
    };
    
    export const ItemTypes = {
        BOX: 'box',
      }
    
    function getItemStyles(initialOffset, currentOffset, isSnapToGrid) {
        if (!initialOffset || !currentOffset) {
            return {
                display: 'none',
            };
        }
        let { x, y } = currentOffset;
        if (isSnapToGrid) {
            x -= initialOffset.x;
            y -= initialOffset.y;
            [x, y] = snapToGrid(x, y);
            x += initialOffset.x;
            y += initialOffset.y;
        }
        const transform = `translate(${x}px, ${y}px)`;
        return {
            transform,
            WebkitTransform: transform,
        };
    }
    export const CustomDragLayer = (props) => {
        const { itemType, isDragging, item, initialOffset, currentOffset, } = useDragLayer((monitor) => ({
            item: monitor.getItem(),
            itemType: monitor.getItemType(),
            initialOffset: monitor.getInitialSourceClientOffset(),
            currentOffset: monitor.getSourceClientOffset(),
            isDragging: monitor.isDragging(),
        }));
        function renderItem() {
            switch (itemType) {
                case ItemTypes.BOX:
                    return <BoxDragPreview title={item.title}/>;
                default:
                    return null;
            }
        }
        if (!isDragging) {
            return null;
        }
        return (<div style={layerStyles}>
    			<div style={getItemStyles(initialOffset, currentOffset, props.snapToGrid)}>
    				{renderItem()}
    			</div>
    		</div>);
    };

snapToGrid

export function snapToGrid(x, y) {
        const snappedX = Math.round(x / 32) * 32
        const snappedY = Math.round(y / 32) * 32
        return [snappedX, snappedY]
      }

DraggableBox

import { memo, useEffect } from 'react';
    import { useDrag } from 'react-dnd';
    import { getEmptyImage } from 'react-dnd-html5-backend';
    
    export const ItemTypes = {
        BOX: 'box',
      }
    
      const styles = {
        border: '1px dashed gray',
        padding: '0.5rem 1rem',
        cursor: 'move',
    };
    
    export const Box = memo(function Box({ title, yellow, preview }) {
        const backgroundColor = yellow ? 'yellow' : 'white';
        return (<div style={
       { ...styles, backgroundColor }} role={preview ? 'BoxPreview' : 'Box'}>
    			{title}
    		</div>);
    });
    
    function getStyles(left, top, isDragging) {
        const transform = `translate3d(${left}px, ${top}px, 0)`;
        return {
            position: 'absolute',
            transform,
            WebkitTransform: transform,
            opacity: isDragging ? 0 : 1,
            height: isDragging ? 0 : '',
        };
    }
    export const DraggableBox = memo(function DraggableBox(props) {
        const { id, title, left, top } = props;
        const [{ isDragging }, drag, preview] = useDrag(() => ({
            type: ItemTypes.BOX,
            item: { id, left, top, title },
            collect: (monitor) => ({
                isDragging: monitor.isDragging(),
            }),
        }), [id, left, top, title]);
        useEffect(() => {
            preview(getEmptyImage(), { captureDraggingState: true });
        }, []);
        return (<div ref={drag} style={getStyles(left, top, isDragging)} role="DraggableBox">
    			<Box title={title}/>
    		</div>);
    });

BoxDragPreview

import { useEffect, useState, memo } from 'react';
    
    const stylesBox = {
        border: '1px dashed gray',
        padding: '0.5rem 1rem',
        cursor: 'move',
    };
    
    export const Box = memo(function Box({ title, yellow, preview }) {
        const backgroundColor = yellow ? 'yellow' : 'white';
        return (<div style={
       { ...stylesBox, backgroundColor }} role={preview ? 'BoxPreview' : 'Box'}>
    			{title}
    		</div>);
    });
    
    const styles = {
        display: 'inline-block',
        transform: 'rotate(-7deg)',
        WebkitTransform: 'rotate(-7deg)',
    };
    export const BoxDragPreview = memo(function BoxDragPreview({ title }) {
        const [tickTock, setTickTock] = useState(false);
        useEffect(function subscribeToIntervalTick() {
            const interval = setInterval(() => setTickTock(!tickTock), 500);
            return () => clearInterval(interval);
        }, [tickTock]);
        return (<div style={styles}>
    				<Box title={title} yellow={tickTock} preview/>
    			</div>);
    });