zoukankan      html  css  js  c++  java
  • react-smooth-dnd 拖拽实例

    import React, { useState } from 'react'
    import { Container, Draggable } from 'react-smooth-dnd'
    import { v4 as uuidv4 } from 'uuid'
    
    export default function CardPlus() {
      const [toolList, setToolList] = useState([
        {
          id: 't0',
          name: '1',
        },
        {
          id: 't1',
          name: '2',
        },
        {
          id: 't2',
          name: '3',
        },
      ])
    
      const [contentList, setContentList] = useState([
        {
          id: 'c0',
          name: 'a',
        },
        {
          id: 'c1',
          name: 'b',
        },
        {
          id: 'c2',
          name: 'c',
        },
      ])
    
      const applyDrag = (arr, dragResult) => {
        const { removedIndex, addedIndex, payload } = dragResult
        if (removedIndex === null && addedIndex === null) return arr
    
        const result = [...arr]
        let itemToAdd = payload
    
        if (removedIndex !== null) {
          itemToAdd = result.splice(removedIndex, 1)[0]
        }
    
        if (addedIndex !== null) {
          result.splice(addedIndex, 0, itemToAdd)
        }
    
        return result
      }
    
      const handleGetChildPayload = ({type, index}) => {
        if (type === 'tool') {
          const id = uuidv4()
          return {...toolList[index], id}
        } else if (type === 'content') {
          return contentList[index]
        }
      }
    
      const handleCardDrop = ({ type, dragResult }) => {
        console.log(dragResult)
        if (type === 'tool') {
          const result = applyDrag(toolList, dragResult)
          setToolList(result)
        } else if (type === 'content') {
          const result = applyDrag(contentList, dragResult)
          setContentList(result)
        }
      }
    
      return (
        <div className="m-test-wrap">
          <div className="m-test-tool">
            <Container
              orientation="vertical"
              onDrop={(dragResult) => handleCardDrop({ type: 'tool', dragResult })}
              getChildPayload={(index) => handleGetChildPayload({type: 'tool', index})}
              behaviour="copy"
              groupName="col"
            >
              {toolList.map((item) => (
                <Draggable key={item.id} className="m-test-list-item">
                  <div>{item.name}</div>
                </Draggable>
              ))}
            </Container>
          </div>
          <div className="m-test-list">
            <Container
              orientation="vertical"
              onDrop={(dragResult) =>
                handleCardDrop({ type: 'content', dragResult })
              }
              getChildPayload={(index) => handleGetChildPayload({type: 'content', index})}
              groupName="col"
            >
              {contentList.map((item) => (
                <Draggable key={item.id} className="m-test-list-item">
                  <div>{item.name}</div>
                </Draggable>
              ))}
            </Container>
          </div>
        </div>
      )
    }
    

    参考链接:

    https://kutlugsahin.github.io/smooth-dnd-demo/

  • 相关阅读:
    Balance的数学思想构造辅助函数
    1663. Smallest String With A Given Numeric Value (M)
    1680. Concatenation of Consecutive Binary Numbers (M)
    1631. Path With Minimum Effort (M)
    1437. Check If All 1's Are at Least Length K Places Away (E)
    1329. Sort the Matrix Diagonally (M)
    1657. Determine if Two Strings Are Close (M)
    1673. Find the Most Competitive Subsequence (M)
    1641. Count Sorted Vowel Strings (M)
    1679. Max Number of K-Sum Pairs (M)
  • 原文地址:https://www.cnblogs.com/xutongbao/p/15264312.html
Copyright © 2011-2022 走看看