react-smooth-dnd 拖拽实例（react-smooth-dnd 列表排序）

react-smooth-dnd 拖拽实例（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 (

参考链接：

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。