react-smooth-dnd 拖拽实例

react-smooth-dnd 拖拽实例

原创

徐同保的博客博主文章分类:web前端 ©著作权

文章标签 javascript github 文章分类 Python 后端开发

©著作权归作者所有:来自51CTO博客作者徐同保的博客的原创作品,请联系作者获取转载授权,否则将追究法律责任

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/​

  • 收藏
  • 评论
  • *举报

上一篇:使用pm2管理node进程

下一篇:阿里云windows server2012 Openssh-server(服务端-免密登陆设置)

Original: https://blog.51cto.com/xutongbao/5510819
Author: 徐同保的博客
Title: react-smooth-dnd 拖拽实例

原创文章受到原创版权保护。转载请注明出处:https://www.johngo689.com/504892/

转载文章受原作者版权保护。转载请注明原作者出处!

(0)

大家都在看

  • 【Pygame 学习笔记】4.Transform 图片的操作

    上一篇文章,我们讲解了如何导入图片并绘制到屏幕中,这篇文章,我们趁热打铁,继续深入学习如何用pygame的transform对图片进行各种操作。 这篇文章需要的资源如下: 0.pn…

    Python 2023年9月19日
    075
  • 【赵渝强老师】Flink的DataSet算子

    Flink为了能够处理有边界的数据集和无边界的数据集,提供了对应的DataSet API和DataStream API。我们可以开发对应的Java程序或者Scala程序来完成相应的…

    Python 2023年6月3日
    086
  • 利用Python实现绘制3D爱心的代码分享

    最近你是否也被李峋的爱心跳动代码所感动,心动不如行动,相同的代码很多,我们今天换一个玩法!构建一个三维的跳动爱心!嗯!这篇博客本着开源的思想!不是说谁对浪漫过敏的 目录 环境介绍 …

    Python 2023年9月6日
    0123
  • Docker安装Redis并使用Another Redis Desktop Manager连接

    🚀 优质资源分享 🚀 学习路线指引(点击解锁)知识定位人群定位🧡 Python实战微信订餐小程序 🧡 进阶级本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯…

    Python 2023年8月12日
    0188
  • Ubuntu22.04 安装配置流水账

    前两天为了测一个CH340的bug, 装了三遍20.04. bug解决完, 心想反正也要重新装各种软件, 不如直接装22.04吧. 把涉及的安装记录一下方便将来参考. 选项一: 使…

    Python 2023年10月21日
    0122
  • 绘制海水密度与盐度、温度的关系曲线

    数学模型:一个大气压国际海水状态方程(温度-2~40℃,实用盐度0~42) 讨论在一个”标准大气压”(海压为0)下,海水密度与实用盐度S与温度T的关系 ρ(…

    Python 2023年8月31日
    0232
  • flask+vue2.0

    1.蓝图的注册要放在所有路由之后。这个坑 2.Vue 打包不生成 .map 文件设置方法 修改config/index.js productionSourceMap: false …

    Python 2023年8月14日
    086
  • 程序员核心——详解调试(2)

    所爱隔山海,山海皆可平,所念皆星河,星河不可及。 上课! 接着上节课讲的调试(1),本节课进一步讲解调试(2). 文章目录 1.调试实例讲解(2) 校招笔试题 2.如何写出好的(易…

    Python 2023年9月27日
    078
  • Python飞机大战

    存在四个对象:我方飞机、敌方飞机、我方子弹、敌方子弹功能: 背景音乐的添加 我方飞机可以移动【根据按键来控制的】敌方飞机也可以移动【随机的自动移动】 双方飞机都可以发送子弹 步骤:…

    Python 2023年9月18日
    087
  • pytest(四)插件之报告、排序、重试、跳过

    一、测试报告 安装pytest测试报告插件1.在线安装 pip install pytest-html2.离线安装 下载对应的离线安装包,解压后进入对应目录,执行python se…

    Python 2023年9月12日
    090
  • knn算法详解

    1.什么是knn算法 俗话说:物以类聚,人以群分。看一个人什么样,看他身边的朋友什么样就知道了(这里并没歧视谁,只是大概率是这样) 对于判断下图绿色的球是哪种数据类型的方法就是根据…

    Python 2023年10月22日
    066
  • python3 五子棋

    import sys import pygame import math class FiveInARow(): def __init__(self): pygame.init()…

    Python 2023年9月24日
    079
  • 【计算机设计大赛近年获奖信息】数据分析及可视化

    【计算机设计大赛近年获奖信息】数据分析及可视化 * – 写在前面 – 数据读取及描述 – 数据预处理 – + 各年数据集格式化 + …

    Python 2023年8月6日
    088
  • NNDL 作业9:分别使用numpy和pytorch实现BPTT

    6-1P:推导RNN反向传播算法BPTT. 6-2P:设计简单RNN模型,分别用Numpy、Pytorch实现反向传播算子,并代入数值测试. import torch import…

    Python 2023年8月28日
    091
  • Python:灵活的开发环境

    以下内容为本人的学习笔记,如需要转载,请声明原文链接微信公众号「englyf」 https://mp.weixin.qq.com/s/WTl7BPAhX5VuK-gmHaErMg …

    Python 2023年10月13日
    068
  • 最近大火的「元宇宙」是什么?

    作者:腾讯技术工程特约撰稿人 李佳华 本文将介绍元宇宙的由来和底层技术,探讨海内外资本在这条赛道上的布局,元宇宙将会对哪些行业产生变革的影响,这些影响背后凸显了元宇宙的哪些价值,以…

    Python 2023年10月9日
    085
亲爱的 Coder【最近整理,可免费获取】👉 最新必读书单  | 👏 面试题下载  | 🌎 免费的AI知识星球