react-beautiful dnd从列表中拖动克隆
react-beautiful-dnd是一个用于实现拖放功能的React库。它提供了一种简单且灵活的方式来实现列表中的拖动和重新排序。
react-beautiful-dnd的主要特点包括：
- 简单易用：react-beautiful-dnd提供了简单的API和组件，使得实现拖放功能变得非常容易。
- 高度可定制：它允许开发人员自定义拖放的外观和行为，以满足不同的需求。
- 性能优化：react-beautiful-dnd使用了一些优化技术，如虚拟化和批量更新，以提高性能并确保流畅的拖放体验。
- 跨浏览器支持：它支持主流的现代浏览器，并提供了对移动设备的良好支持。
- 社区活跃：react-beautiful-dnd拥有一个活跃的社区，开发者可以在社区中获取支持和解决问题。
应用场景： react-beautiful-dnd适用于任何需要实现拖放功能的场景，例如任务列表的重新排序、图像库的拖动和重新排列等。
推荐的腾讯云相关产品： 腾讯云提供了一系列与云计算相关的产品，以下是一些推荐的产品：
- 云服务器（CVM）：提供可扩展的虚拟服务器，用于部署和运行应用程序。
- 云数据库MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务，适用于存储和管理数据。
- 云存储（COS）：提供安全可靠的对象存储服务，用于存储和管理大规模的非结构化数据。
- 人工智能机器学习平台（AI Lab）：提供丰富的人工智能算法和工具，用于开发和部署机器学习模型。
- 云安全中心（SSC）：提供全面的云安全解决方案，包括漏洞扫描、入侵检测等功能。
- 云监控（Cloud Monitor）：提供实时的监控和告警服务，帮助用户及时发现和解决问题。
更多腾讯云产品信息和介绍，请访问腾讯云官方网站：https://cloud.tencent.com/
相关·内容
file=/index.js它在沙箱中的编辑器中工作得很好，但当我在我的计算机上运行代码时，它的工作方式与示例中的不同。当拖动一些东西时，下面的下一个元素消失了。有没有人知道如何实现这种克隆效果？
浏览 155提问于2020-10-26得票数 1
如何确保可拖动组件不会超出react-beautiful dnd中的Dropable区域或某个特定的div？ 我希望确保可拖动组件不会超出某个特定的div或区域或外部可拖放区域。在当前时间，我找不到任何工作来限制可拖动组件在某个特定区域或容器中的移动。非常欢迎您的帮助和建议。 谢谢
浏览 147提问于2021-01-09得票数 1
我用react-beautiful dnd练习的简单应用程序不能像预期的那样工作。列表项不会拖动，而只是创建一个相邻的占位符。
浏览 36提问于2019-01-29得票数 0
我正在使用react-beautiful dnd创建一个类似trello的组件，但是在拖动过程中这个可拖动的对象是不可见的，我正在努力找出原因。
浏览 2提问于2018-11-27得票数 3
我有一个简单的react-beautiful dnd应用程序，其中有多行，您可以在它们自己的行中拖动组件。我的问题是，当我在一行中拖动一个可拖动对象时，内容移动和被拖动组件消失的视觉效果在每一行都会发生。 这是一个演示我的问题的gif： ?
浏览 154提问于2020-01-17得票数 3
回答已采纳
1回答
例如，我有一个使用react-beautiful dnd的待办事项应用程序，它包含三个组件: DragDropContext、Droppable和Draggable。整个应用程序现在包含四个组件:主应用程序组件，它将数据传递给三个react-beautiful dnd组件。到目前为止，这是非常简单和可重用的。为此，我需要向可拖动组件添加逻辑。接下来，我想添加一个功能，允许我在列表中添加/删除任务。为此，我需要修改DragDropContext或Droppabl
浏览 19提问于2020-06-21得票数 2
我正在尝试在一个应用程序中同时使用D3、平行圆弧和材料表。每个组件单独运行良好。但是当这些一起呈现时，react- but dnd内部就会发生一个问题。D3平行圆弧在内部使用d3拖拽包，材料表使用react-beautiful dnd包。我认为这是因为当渲染时，每个组件中的react- because dnd和d3-拖动是相互影响的，所以发生了这个问题。
浏览 99提问于2020-05-14得票数 0
当免打扰操作进行时，我如何保持可拖拽在它的原始列表中？例如，我想拖动项目“复制”，并保持它的原始位置，在同一时间。在onDragEnd之后，我可以复制数据，但是当拖动数据时，它看起来是错误的，可能会让用户感到困惑。(在官方列表中找不到示例)
浏览 58提问于2020-04-17得票数 5
回答已采纳
我正在尝试使用Material UI和react-beautiful dnd创建一个可拖动的列表。guide on using the innerRef callback functions at:
https://github.com/atlassian/react-beautiful-dnd
浏览 0提问于2019-04-26得票数 1
我正在尝试将React钩子与atlassian/react-beautiful dnd 一起使用我几乎被困在这里了。import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd
浏览 6提问于2019-10-28得票数 0
我正在尝试使用react-beautiful dnd创建一个非常简单的、可拖动的元素列表。当我尝试使用快照并分配snapshot.isDragging的值时，我得到一个错误。provided.draggableProps}import styled from &quo
浏览 62提问于2020-08-29得票数 0
回答已采纳
我已经用react-dnd创建了一个简单的可排序列表，使用的代码类似于中的react-dnd的可排序示例。但是，我在尝试概念化如何调整此示例并利用react-dnd的来自定义拖动预览时遇到了一些困难。具体地说，我希望在开始拖动组件时更改组件的背景色。不要太复杂。
为什么我需要使用一个自定义的拖动层？因为由于浏览器API和react-dnd的HTML5后端的限制，我不能使用CSS设置拖动预览的样式(这就是我正在使用的)
浏览 16提问于2020-04-06得票数 2
2回答
我正在尝试编写一个类，用于在我的网页中实现可视拖放功能(是的，我知道有一些jquery插件，我这样做是为了“有趣”)。一切似乎都很好，但是当我不止一次拖动div时，脚本就会疯狂。= e.screenY; dnd.componentY = parseInt(dnd.obj.style.left- dnd.screenX;
dnd.o
浏览 6提问于2014-05-02得票数 0
回答已采纳
从JSON生成图形表示很好。通过拖放不同的元素生成JSON也很好。我主要使用来设置初始列表和设置按钮来拖动新元素。但是，这只在我尝试向li元素中添加dnd类型和在ul元素中添加dnd允许类型之前才能起作用。使用这些类型是一种需求，因为在我想用该“编辑器”创建的Json中有某种层次结构的子元素。THe列表，我想将一些内容嵌入到： <
浏览 5提问于2016-10-13得票数 0
回答已采纳
我在react组件中搜索了许多支持DND功能的库，但不幸的是，找不到没有中心拖动点的库。所有这些我都看到他们在长卡片内容上有一个问题。我所寻找的是，当开始拖动列表中的项目时，我需要项目根据鼠标指针改变其位置，而不是项目中心点。 有什么建议吗？ 需要覆盖两件事。1)多个目标(任务列表类似于ZendHub) 2)拖动点基于鼠标位置，而不是中心。这个不错，但它是根据Item Center :/ https://rafaelqui
浏览 16提问于2019-04-17得票数 0
我有react-beautiful dnd水平多列表(6行，每行有相同的项目)，每个列表中都有相同的项目。我想从每个列表中删除单独的选定项，但在呈现列表本身时，只需让一个带有onClick的按钮组件触发onClick。如何配置列表，以便在单击close/delete (x)按钮时从该列表中删除单个项目？Component } from 'react';
impo
浏览 0提问于2018-05-31得票数 2
我使用的是角拖放列表和角ng文件上传。当我拖动以重新排序列表项目时，如果我悬停在文本区域(ng文件上传区)上，就会将dragover类添加到下拉区域。如何防止dnd-list中的可拖动元素触发对ng文件上载下拉区域的拖放。
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js&qu
浏览 3提问于2017-02-17得票数 2
我对React.js非常陌生，我想实现的是一个拖放组件(让我们称之为DDCom)：我真的不知道如何在React.js中实现这一点，有没有人能给出一些代码示例(或者解释一下如何用FLUX模式构造它)？大多数帖子都指向React DnD，但它看起来太大了，很难理解，我想要的是一个简单清晰的
浏览 3提问于2015-10-01得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
