react- but dnd中的Draggables不会拖动，而只会创建占位符
React DnD（Drag and Drop）是一个用于实现拖放功能的React库。在React DnD中，Draggables是可拖动的组件，可以通过拖动它们来实现交互操作。如果Draggables不会拖动，而只会创建占位符，可能是由于以下几个原因：
- 错误的组件嵌套：确保Draggables组件被正确地嵌套在DragDropContext（拖放上下文）组件中。DragDropContext是React DnD的核心组件，用于提供拖放功能的上下文环境。
- 缺少必要的属性：Draggables组件需要设置一些必要的属性，例如dragSource和dropTarget。dragSource属性定义了拖动开始时的行为，而dropTarget属性定义了拖动结束时的行为。确保这些属性被正确地设置。
- 事件处理函数错误：Draggables组件需要正确地处理拖动相关的事件，例如onDragStart、onDragEnd等。确保这些事件处理函数被正确地定义和调用。
- CSS样式问题：检查Draggables组件的CSS样式是否正确设置。确保拖动时的样式变化被正确地应用。
如果以上方法都没有解决问题，可以尝试查阅React DnD的官方文档，其中包含了更详细的使用说明和示例代码。以下是腾讯云相关产品和产品介绍链接地址：
相关·内容
2回答
如何将反应DnD与反应全日历相结合？
reactjs、react-dnd
我有下面的简单演示一个拖放组件使用React DnD插件。
Card.js (DropSource)
import React, { Component } from 'react';
import { DragSource } from 'react-dnd';
const ItemTypes = {
CARD: 'card'
};
const cardSource = {
beginDrag(props) {
return { };
}
}
function collect(connect, mo
浏览 6提问于2018-05-31得票数 15
1回答
ReactDnd拖动预览-查找正确的图案
reactjs、react-dnd
我正在尝试实现一个简单的拖动预览，它覆盖了默认的浏览器行为，但我似乎找不到正确的模式，并且文档只引用了一组简单的示例，而没有解释层如何工作的更大上下文。
下面是一些代码:当前不起作用--不确定如何链接它，以便被拖动项的预览显示项，而不是其他项。如何创建此链接？这里我漏掉了什么？
import React, { Component } from 'react';
import { DragDropContext, DragSource, DropTarget, DragLayer } from 'react-dnd';
import HTML5Backend, {
浏览 49提问于2017-08-11得票数 2
1回答
学习React DND时出现的编译问题
javascript、reactjs、react-dnd
我开始学习中的React拖放
但我在理解教程时遇到了问题。接下来是我创建的所有文件，但在编译时我得到了：
dragDropBundle.js:830 Warning: Failed prop type: The prop
`connectDropTarget` is marked as required in `BoardSquare`, but its value is `undefined`.
in BoardSquare (created by Board)
in Board (created by DragDropContext(Board))
in Drag
浏览 20提问于2018-02-10得票数 2
回答已采纳
4回答
React/AntDesign如何使行可拖动？(表格拖动排序)
javascript、reactjs、typescript、drag-and-drop、antd
我一直在编写这个简单的单列拖放表，但当我拖动它们时，行不会移动。我该在哪里修复或检查它？
我使用的是React、AntDesign和JavaScript (带有TypeScript)
import * as React from 'react';
import ReactDOM from "react-dom";
import { Table } from "antd";
import { DndProvider, DragSource, DropTarget } from "react-dnd";
import HTML
浏览 0提问于2019-08-14得票数 6
1回答
自定义拖动预览触摸屏与[dnd-多后端]或[TouchBackend]+[HTML5Backend]+[现代化]？
javascript、reactjs、drag-and-drop、modernizr、react-dnd
在dnd-multi-backend库中，有这样的说明：
由于本机拖放目前不支持触摸设备。需要自定义DragPreview。查看示例实现的示例。
但是一个例子的链接不起作用。有没有人有一个例子，如何添加一个‘鬼’预览时，拖动一个元素的触摸设备？
在笔记本电脑上预览工作。HTML5toTouch中的预览选项设置为true。
( 1)在笔记本电脑和触摸设备上使用dnd-multi-backend dnd时工作，但在触摸设备上不预览：
import MultiBackend, { TouchTransition } from 'react-dnd-multi-backend'
浏览 1提问于2019-03-15得票数 3
1回答
如何在React中保存拖放行的状态？
reactjs、react-beautiful-dnd
我是一个初学者，目前，我正在努力学习如何使表格的行可拖动和可重新排列。我使用的是react-beautiful dnd库。我可以将行设置为可拖动，但无法在拖放后保存行的状态。我将非常感谢任何关于这方面的帮助。 import { Component } from 'react';
import React from 'react';
import './App.css';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
cl
浏览 34提问于2021-09-10得票数 0
回答已采纳
3回答
拖动时显示整个列表的React DnD
reactjs、meteor、material-ui、react-dnd
我正在尝试使用的List和ListItem来集成，在拖动时，整个列表显示为拖动的元素。我已经尽我所能理解这些示例，下面是我所拥有的
import React, { Component, PropTypes } from 'react';
import { Random } from 'meteor/random';
import LocalizedComponent from '/client/components/LocalizedComponent';
// MUI
import { List, ListItem } from 'ma
浏览 1提问于2017-02-15得票数 4
1回答
在Swing drop回调期间是否禁止更改组件层次结构？
java、swing、drag-and-drop
我注意到，如果我在处理drop 时执行removeAll()，add()，revalidate()，drop将成功，更改将生效，但我将无法启动第二次拖动。任何后续的拖动尝试都将抛出java.awt.dnd.InvalidDnDOperationException: Drag and drop in progress。
似乎如果do更改了层次结构，拖动将不会被清除，Swing认为仍有一个正在进行的拖动等待完成。即使在调用DropTargetDropEvent.acceptDrop()和DropTargetDropEvent.dropComplete()之后层次结构发生更改，也会发生这种情况
im
浏览 0提问于2017-11-21得票数 0
2回答
React dnd-不确定如何对相同类型的嵌套组件进行拖放。
javascript、reactjs、nested-lists
我正在尝试构建一个react嵌套列表组件，该组件可以完全拖拽使用react dnd。我有一个菜单组件，其中包含项目组件，每个项目也可以包含其他项目组件。不幸的是，我不知道如何使具有子节点或其子节点的节点具有可拖动性。现在，我已经得到了没有童数的节点，这是一个很好的开始，但随后失败了：
TypeError:节点未定义
任何时候我都想拖拽任何一个孩子。我使用react dnd 示例作为引用，但不包含任何嵌套。
以下是我到目前为止所拥有的：
Menu.js
//React DnD
var DragDropContext = require('react-dnd').DragDro
浏览 3提问于2015-11-11得票数 2
1回答
仅在拖动时响应DnD更改div样式
react-dnd
我正在使用react-dnd库实现拖放机制，但我发现很难为我的拖放目标设置样式。我想向用户显示哪个drop目标是可用的，但是使用isOver和canDrop只会将当前正在悬停的项目样式化。
如果我使用!isOver值，那么所有的div都是样式化的，甚至没有拖动任何元素。
当拖放元素发生时，我如何才能将拖放目标设置为(仅为)？
到目前为止，这是我的代码，用于@DropTarget：
import React from 'react';
import {DropTarget} from 'react-dnd';
import {ItemTypes} from
浏览 2提问于2017-12-24得票数 1
回答已采纳
1回答
在拖放事件发生后，无法添加新项到状态。
javascript、reactjs、drag-and-drop、react-dnd
在将这段代码实现到图像上传程序之前，我正在编写一个简单的ReactDND版本。
每次添加图像时，都会将其添加到状态中，并传递到ReactDND，使其具有可拖动性和可下垂性(这样用户就可以重新排列其图像)。
一切都很好，除了一件事。我遇到的问题是在添加多个图像之后，一旦拖放和图像(有效)，状态不再更新ReactDND，我不能添加新的图像。
下面是我的代码(注意，我只是使用一个按钮来添加额外的项来声明)：
主要构成部分：
import React from 'react';
// Drag and drop stuff
import { DragDropContext } fro
浏览 4提问于2017-08-26得票数 0
回答已采纳
1回答
反应ReRender问题
javascript、reactjs、reactive-programming、react-dnd
我正在创建一个web应用程序，它允许用户在屏幕上拖动和拖动多个片段，每个片段都包含特定的数据。如果用户希望将更多的片段添加到屏幕上，他们只需单击一个按钮，另一个片段就会出现。我使用React (拖放和悬垂)库来保持组件的解耦，到目前为止，这还不错。问题是在屏幕上添加更多的片段的动态特性。目前(在下面的子代码中)，我正在获取旧的state对象，执行一个浅拷贝，并将新创建的对象与预先存在的状态对象合并，并在完成后更新状态。但是，每次执行此操作时，所有操作都很正常(在屏幕上生成的新片段)，直到我移动一个新的部分，并得到以下错误：
无法在现有状态转换期间(例如在render内)进行更新。呈现方法应该
浏览 0提问于2016-03-26得票数 5
1回答
拖动n‘Drop火花列表Item呈现在两个组件之间
drag-and-drop、flex4
我试图做一些拖放之间的2个火花列表，位于不同的组成部分。因为我的第一次尝试没有成功，我决定搜索它，并阅读更多关于DragAndDrop .试过了我能找到的所有例子，但没有任何缝对我有用。
所以让我们谈谈重点。
List1Component B有组件A有List2
组件A - List 1有dragEnabled="true"和mouseDown="initiateDrag(event)"
private function initiateDrag(e:MouseEvent):void{
var dragInitiator:IUIComponent = e
浏览 0提问于2011-03-20得票数 0
1回答
如何在使用带有自定义拖动预览的React DnD进行拖放时隐藏元素？
reactjs、react-dnd
我正在使用React DnD来处理React应用程序中的拖放。我正在使用。在这个实现中，我使用了一个自定义的拖动预览。在拖动时，我通过将其最大高度动画设置为0来隐藏“被拖动”的元素。当用户拖动时，将显示自定义拖动预览。如果用户将元素放在不允许的区域中，则“被拖动”项将动画恢复到其原始高度。这很好。
当项目被拖放时，我发送一个redux操作，对项目列表进行重新排序，并将之前拖动的元素放到新位置。
但是，在DOM更新项目并在其新位置设置项目动画之前，有一段时间被拖动的项目在其当前位置闪烁。
最大高度动画由isDragging为true时添加和删除的CSS类控制。
我已经搜索了React DnD文档
浏览 38提问于2017-03-04得票数 0
回答已采纳
5回答
React DND -在鼠标移动时获取拖动元素的坐标
javascript、reactjs、react-dnd
我有一个图像，当我拖动的时候，我也想实现一个旋转。我想的解决方案是使用React DnD来获得拖动图像位置的xy坐标，并计算原始图像位置之间的差异。此差的值将构成进行旋转的基础。 我已经查看了监视器库上的示例，并且看到了监视器规范可以访问ReactDnD变量。这个监视器变量可以访问像getInitialClientOffset()这样的方法。当我实现一个具有这个值的console.log()时，它会在我释放鼠标时显示最后一个坐标集。 使用这个库，有没有一种简单的方法可以在我移动鼠标时获得被拖动元素的当前位置？ import React from 'react'
impor
浏览 256提问于2019-04-16得票数 7
1回答
如何让React组件更具可重用性？
javascript、reactjs、frontend
我一直在学习React，在过去的一个月里一直在做一个项目，但我开始意识到我的组件不一定是“可重用的”。我知道可重用性是React的一个重要概念，但我不知道如何简化我的组件。 例如，我有一个使用react-beautiful dnd的待办事项应用程序，它包含三个组件: DragDropContext、Droppable和Draggable。整个应用程序现在包含四个组件:主应用程序组件，它将数据传递给三个react-beautiful dnd组件。到目前为止，这是非常简单和可重用的。 现在，我想为每个任务添加一个信息按钮，当用户单击该按钮时，将显示第五个组件Info。为此，我需要向可拖动组件添加
浏览 19提问于2020-06-21得票数 2
2回答
ReactJS -页面重新呈现，但一个组件保持不变。(美丽的拖放)
reactjs、render、react-beautiful-dnd
我有一个非常奇怪的问题，一个页面上只有一个组件没有被刷新，我只是不知道为什么。
下面是一个关于这个问题的短片：
请注意，当我单击“确认”(这是应该的)时，问题字符串是如何变化的，但是拖放窗口的卡片保持不变。它一直显示问题名"yooo“和答案"abc，def"，而这仅适用于第一个问题。
我对ReactJS还比较陌生，所以这里可能有一些我不熟悉的功能？据我所知，DragAndDrop应该完全用下一个问题重新呈现。目前，构造函数没有再次被调用，它以某种方式保存了最后一个问题的数据。
呈现本页。DragAndDrop被叫到这里。在确认()中，currentQuestion被设
浏览 6提问于2020-09-26得票数 0
回答已采纳
1回答
如何在使用react-beautiful dnd删除元素后保持适当的间距？
reactjs、material-ui、padding、react-beautiful-dnd
我结合使用Material UI和react-beautiful-dnd来创建一个非常简单的Grid列布局，其中包含可以重新排序的元素。但是，我遇到了元素之间的间距问题，这很难解释，所以我只给你展示一下： ? 我不确定这个问题是从哪里来的，甚至不知道该怎么称呼它。在内部，Grid的spacing属性是使用padding实现的，我甚至找不到任何信息来说明为什么拖放系统不能使用它。以下是代码的主要部分： import { makeStyles } from "@material-ui/core";
import { Grid, Paper } from "@mat
浏览 48提问于2020-06-25得票数 0
回答已采纳
4回答
拖动时，react漂亮-dnd不会在drawer ui-next.com持久抽屉中显示可拖放的项。
material-ui、drawer
我有一个，它包含一个带有可拖放项的可下垂列表。功能是存在的，但是当拖动一个项目时，将不会显示正在拖动的项。我可以完美地拖动项目，空间被分配，包括dnd框架所期望的动画，我只是看不出我在拖什么。如果我把抽屉换成永久的抽屉，一切都会如愿以偿。有什么建议吗？
我的组件(在原型代码中)：( DragDropContext在父组件中声明)
import React from 'react';
import { Divider, Drawer, IconButton, List, ListItem, Paper,
withStyles } from 'material-ui
浏览 0提问于2018-04-10得票数 1
回答已采纳
2回答
在实现React DnD之后，在DnD中发出刷新子组件
reactjs、react-dnd
我试图使用React实现React中的可排序列表。在执行拖放边之前，一切都进行得很好。
我有一个容器组件，它呈现如下：
<DndProvider backend={Backend}>
{this.state.classifications.map((classification, index) =>
<Classification id={classification.id} classification={classification} reportTemplate={this}
浏览 4提问于2020-05-14得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
