- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端专享
使用 React-DnD 打造简易低代码平台
React-dnd React DnD 是 React 和 Redux 核心作者 Dan Abramov 创造的一组 React 工具库，可以帮助您构建复杂的拖放接口，同时保持组件的解耦性。 /example' import { DndProvider } from 'react-dnd' import { HTML5Backend } from 'react-dnd-html5-backend 如果是手机端就要使用 react-dnd-touch-backend，因为 react-dnd-html5-backend不支持触摸 DragBox 的实现 import { useDrag } from 'react-dnd 主要是为了避免页面中多个拖放的实例 item 就是拖动时候传递的数据 end 是拖放结束后的回调 collect 用于获得拖动的状态，可以设置样式 DropContainer 实现 import { useDrop } from 'react-dnd 如果只看左侧组件区和中间的设计区是否跟 react-dnd 官方的 demo 很相似呢？
7.4K20编辑于 2022-01-20 - 来自专栏前端技术归纳
关于react-dnd，看这一篇就够了
theme: channing-cyan 前言 最近公司准备开发一个审批流系统，其中会用到拖拽工具来搭建流程，关于拖拽的实现我们选择了react-dnd这个库，本文总结了react-dnd API的详细用法 在拖动的过程中，不需要开发者自己判断拖动状态，只需要在传入的 spec 对象中各个状态属性中做对应处理即可，因为react-dnd使用了redux管理自身内部的状态。 值得注意的是，react-dnd并不会改变页面的视图，它只会改变页面元素的数据流向，因此它所提供的拖拽效果并不是很炫酷的，我们可能需要写额外的视图层来完成想要的效果，但是这种拖拽管理方式非常的通用，可以在任何场景下使用 react-dnd文档传送门 核心API 介绍实现拖拽和数据流转的核心API，这里以Hook为例。 参考链接 https://react-dnd.github.io/react-dnd/docs/overview https://zhuanlan.zhihu.com/p/429986799
20K42编辑于 2022-10-28 - 来自专栏神光的编程秘籍
react-dnd 从入门到手写低代码编辑器
拖拽是常见的需求，在 react 里我们会用 react-dnd 来做。 不管是简单的拖拽，比如拖拽排序，或者复杂的拖拽，比如低代码编辑器，react-dnd 都可以搞定。 这篇文章我们就来用 react-dnd 来实现一下这些功能吧。 我们对 react-dnd 的掌握又加深了一分。 这样，我们就实现了一个低代码的编辑器，对 react-dnd 算是有了比较好的掌握了。 用 react-dnd，我们能实现各种基于拖拽的功能。
2.3K20编辑于 2023-09-13 - 来自专栏Web前端
React 拖拽组件 Drag & Drop
React 提供了多种方式来实现拖拽功能，包括原生的 HTML5 Drag and Drop API 和第三方库如 react-dnd。 使用 react-dnd 库 2.1 概述 react-dnd 是一个流行的第三方库，提供了更高级的拖拽功能和更好的开发体验。 2.2 安装 首先，安装 react-dnd 及其依赖： npm install react-dnd react-dnd-html5-backend 2.3 代码示例 以下是一个使用 react-dnd import React, { useState } from 'react'; import { DndProvider, useDrag, useDrop } from 'react-dnd'; import 无论是使用原生的 HTML5 Drag and Drop API 还是第三方库 react-dnd，都需要注意一些常见的问题和易错点，以确保拖拽功能的稳定性和用户体验。
95310编辑于 2024-11-12 - 来自专栏趣谈前端
前端10大开源拖拽排序库汇总, 让搭建,更简单
「github:」 https://github.com/taye/interact.js 「demo地址:」 https://interactjs.io/ 3. react-dnd 「React DnD 「github:」 https://github.com/react-dnd/react-dnd 「demo地址:」 http://react-dnd.github.io/react-dnd 4. 其中最值得注意的是惊人的「react-dnd」. 它提供了一套非常出色的拖放函数,这些函数在特定情况下非常适用疯狂地不一致的html5拖放功能.
7.1K21编辑于 2022-04-06 - 来自专栏前端进阶实战
前端里的拖拖拽拽了解一下？
最近在项目中使用了 react-dnd[1]，一个基于 HTML5 的拖拽库，“拖拽能力”丰富了前端的交互方式，基于拖拽能力，会扩展各种各样的拖拽反馈效果，因此有必要学习了解，最好的学习方式就是实操！ 三、已有拖拽库 目前主流的拖拽库有： react-dnd: https://github.com/react-dnd/react-dnd/ react-beautiful-dnd: https://github.com react-sortable-hoc/ 关于几者的差异，可以参阅：《关于react中使用拖拽插件的评测[4]》 四、总结 由于低代码平台其实会有丰富的拖拽场景，从可扩展和兼容性上考虑，最终选择了 react-dnd 参考资料 [1]react-dnd - Github: https://react-dnd.github.io/react-dnd/about [2]draggable - MDN: https://developer.mozilla.org
6.1K30编辑于 2022-07-29 - 来自专栏前端架构师笔记
拖拽神器React DnD你真的了解了吗？
基本用法： import { DragSource } from 'react-dnd' class MyComponent { /* ... */ } export default DragSource 基本用法： import { DropTarget } from 'react-dnd' class MyComponent { /* ... */ } export default DropTarget 基本用法： import Backend from 'react-dnd-html5-backend' import { DndProvider } from 'react-dnd' export default /Container' import { DndProvider } from 'react-dnd' import Backend from 'react-dnd-html5-backend' function src/DraggableBox.js import React from 'react'; import { DragSource } from 'react-dnd'; import Box from
2.4K20编辑于 2022-05-10 - 来自专栏前端Sharing
「React进阶」 推荐 8 个很棒的 React 工具库，强烈建议收藏～
react-dnd 在 github 上得到了 16.4k+ 的 star。 10.jpg 参考官网：https://react-dnd.github.io/react-dnd/docs/overview 项目地址：https://github.com/react-dnd/react-dnd 11.jpg 对于上手 react-dnd ，官网已经很详细了，感兴趣的同学，可以尝试一下。
1.7K20发布于 2021-10-18 - 来自专栏黯羽轻扬
React DnD
/packages ├── dnd-core ├── react-dnd ├── react-dnd-html5-backend └── react-dnd-test-backend 对应逻辑结构是这样 ： API 接React react-dnd 定义Context，提供Provider、Container factory等上层API ------- Core 抽象（定义interface） dnd-core 取出状态并传递给业务层 四.基本用法 1.指定DragDropContext 给App根组件声明DragDropContext，例如： import { DragDropContext } from 'react-dnd this.props.connectDragPreview(img); } 五.在线Demo Github仓库：ayqy/example-react-dnd-nested 在线Demo：https://ayqy.github.io/dnd/demo/react-dnd /index.html 参考资料 React DnD：又是如诗如画的文档，与Redux文档一样停不下来 react-dnd/react-dnd
1.7K30发布于 2019-06-12 - 来自专栏前端壹栈
JavaScript进阶之实现拖拽
最近做到的react项目就有一个拖拽的需求，然后大概搜索了一下，找到了star比较高的react-dnd库，但是阅读react-dnd的官方文档还是有点难受的,因为概念性比较强，所以在介绍react-dnd 的概念有注意理解react-dnd库的api 举个例子?: <!
3.2K40发布于 2021-01-08 - 来自专栏趣谈前端
从零搭建一款PC页面编辑器PC-Dooring
编辑器核心的一环就是组件拖拽, 这里笔者使用了社区比较强大且稳定的库react-dnd, 其拖拽分为两个部分, 一个是从组件区拖拽到画布区, 另一个是画布区内部组件的自由拖拽. image.png 当然深入研究过react-dnd的朋友都知道, 以上两个功能通过react-dnd都可以实现, 大家可以参考它的官网react-dnd官网学习研究具体实现流程, 也可以直接参考PC-Dooring
2.2K40发布于 2021-04-21 - 来自专栏IMWeb前端团队
使用React DnD实现列表拖拽排序
安装 React DnD # Using npm npm i -s react-dnd react-dnd-html5-backend # Using yarn yarn add react-dnd 详细用法请参考 React DnD 文档 或 react-dnd 用法详解 实现列表拖拽排序 components/DndList.js import React, { useState } from "react"; import { DragSource, DropTarget, DragDropContext } from "react-dnd"; import HTML5Backend from
10.4K41发布于 2019-12-04 - 来自专栏趣谈前端
整理了12款开源拖拽库, 轻松上手可视化搭建
「github:」 https://github.com/taye/interact.js 「demo地址:」 https://interactjs.io/ 3. react-dnd 「React DnD 「github:」 https://github.com/react-dnd/react-dnd 「demo地址:」 http://react-dnd.github.io/react-dnd 4. 其中最值得注意的是惊人的「react-dnd」. 它提供了一套非常出色的拖放函数,这些函数在特定情况下非常适用疯狂地不一致的html5拖放功能.
4.6K20编辑于 2024-06-06 - 来自专栏程序员成长指北
推荐 8 个很棒的 React 工具库，强烈建议收藏～
react-dnd 在 github 上得到了 16.4k+ 的 star。 10.jpg 参考官网：https://react-dnd.github.io/react-dnd/docs/overview 项目地址：https://github.com/react-dnd/react-dnd 11.jpg 对于上手 react-dnd ，官网已经很详细了，感兴趣的同学，可以尝试一下。
1.4K10发布于 2021-10-12 - 来自专栏前端实验室
丝滑到起飞！这几个拖拽库真心推荐
Github链接：https://github.com/react-dnd/react-dnd Github Star：19.4K
3K20编辑于 2023-08-10 - 来自专栏DevOps
【前端拖拽组件库】最强开源高性能组件库Pragmatic-drag-and-drop简介与分析
.性能比较 Pragmatic-drag-and-drop针对性能进行了优化，下面根据drag-and-drop-performance-comparison 对react-beatiful-dnd,react-dnd 0ms react-beautiful-dnd +275ms +180ms 22.1ms +10.9ms react-dnd 更是快了287ms，用时6ms；在桌面端，Pragmatic-drag-and-drop比react-beatiful-dnd快了进180ms,比react-dnd是快了166ms，用时1ms；在服务端渲染时 ，Pragmatic-drag-and-drop比react-beatiful-dnd快了进10ms,比react-dnd是快了5ms，只用时0.1ms。 3.75Kb pragmatic-drag-and-drop 11.9Kb 4.3Kb(比react-beatiful-dnd小了7.5倍) 2.62Kb（减少了26%） react-dnd
6.4K22编辑于 2024-05-11 - 来自专栏fastmock
【react-dnd使用总结一】拖放完成后获取放置元素在drop容器中的相对位置
工具函数-根据元素的起始位置和最终位置，计算相对于某元素的位置 export interface IPosition { left: number; top: number; } /** * 根据元素的其实位置和最终位置，计算相对于某元素的位置 * @param initialPosition 拖动元素相对于屏幕左上角的起始位置（偏移量） * @param finalPosition 拖放完成后当前节点相对于屏幕左上角的位置 * @param containerEle 目标容器元素 * @
5.9K10编辑于 2022-07-13 - 来自专栏青梅煮码
2021 年你应该尝试的 8 个 React 库
value: 'vanilla', label: 'Vanilla' } ] const MyComponent = () => ( <Select options={options} /> ) 2. react-dnd 安装: npm i react-dnd 示例代码： import React from 'react' import { useDrag } from 'react-dnd' import { ItemTypes
2.2K10编辑于 2023-02-18 - 来自专栏趣谈前端
可视化搭建移动端店铺解决方案
{ isEmpty, findIndex, isArray, find, every, cloneDeep } from 'lodash'; import { DndProvider } from 'react-dnd true, buyButton: true, buyButtonStyle: 'style-1', buyButtonText: '即将开抢', } 拖拽 拖拽依赖第三方库react-dnd 20210629 * @author: xuchao */ import React, { useContext } from 'react'; import { useDrag } from 'react-dnd author: xuchao */ import React, { useContext, useCallback } from 'react'; import { useDrop } from 'react-dnd
1.9K10发布于 2021-07-12 - 来自专栏Tecvan
从零开始实现一个简单的低代码编辑器
return
{generateRightPanel()}; } 5-3、拖拽组件 最后就到了重中之重，如何实现拖拽，这里使用了react-dnd ，react官方实现的拖拽库，文档参考这里：https://react-dnd.github.io/react-dnd/about 。 在react-dnd中，定义了drag和drop两种类型的组件，那么很显然，左侧面板中需要拖拽的是drag组件，画布是drop组件。 对于左侧需要拖拽的组件，我们使用react-dnd提供的useDrag钩子来使其可拖拽，代码如下： // package/client/components/textComponent/index.tsx2.1K20编辑于 2022-09-02
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号