- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在使用 typescript react-beautiful-dnd 将项目从一个容器拖放到另一个容器,反之亦然。在一个容器中有用户名,而另一个容器只有一个名为“未分配”的名称。以下是数据外观。
import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { v4 } from 'uuid';
const itemsFromBackend = [
{ id: v4(), content: 'First Task' },
{ id: v4(), content: 'Second Task' },
{ id: v4(), content: 'third Task' },
{ id: v4(), content: 'fourth Task' },
{ id: v4(), content: 'fifth Task' },
{ id: v4(), content: 'sixth Task' },
{ id: v4(), content: 'seven Task' },
];
const columnsFromBackend =
{
[v4()]: {
name: "Todo",
items: itemsFromBackend
},
[v4()]: {
name: "Final",
items: [
{ id: v4(), content: 'Unassigned' }
]
}
};
但我的要求是限制“未分配”的拖动属性从最终容器到待办事项容器。但允许待办事项拖放到最终容器,反之亦然。
我正在使用钩子(Hook)和函数组件方法。我尝试使用 isDragDisabled 属性,但它禁用了对两个容器中所有项目的拖动。
下面是我的代码。
function App() {
const [columns, setColumns] = useState(columnsFromBackend);
return (
<div style={{ display: 'flex', justifyContent: 'center' }}>
<DragDropContext onDragEnd={result => onDragEnd(result, columns, setColumns)}>
{Object.entries(columns).map(([id, column]) => {
return (
<div style={{ margin: 8}}>
<h3>{column.name}</h3>
<Droppable droppableId={id} key={id}>
{(provided, snapshot) => {
return (
<div
{...provided.droppableProps}
ref={provided.innerRef}
style={{
background: snapshot.isDraggingOver ? 'lightblue' : 'lightgrey',
padding: 4,
width: 250,
minHeight: 500,
maxHeight: 500,
overflowY: "scroll"
}}
>
{id}
{column.items.map((item, index) => {
return (
<Draggable
key={item.id}
draggableId={item.id}
index={index}
isDragDisabled={false}
>
{(provided, snapshot) => {
return (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={{
userSelect: 'none',
padding: 16,
margin: '0 0 8px 0',
minHeight: '20px',
backgroundColor: snapshot.isDragging ? '#263B4A' : '#456C86',
color: 'white',
...provided.draggableProps.style
}}
>
{item.content}
</div>
)
}}
</Draggable>
)
})}
{provided.placeholder}
</div>
)
}}
</Droppable>
</div>
)
})}
</DragDropContext>
</div>
);
}
提前致谢
最佳答案
为了禁止某个元素的拖拽,需要设置的是他
isDragDisabled={true}
保留其余元素
isDragDisabled={false}
在你的代码中,你只需要设置条件
<Draggable
key={item.id}
draggableId={item.id}
index={index}
isDragDisabled={item.content === 'Unassigned'}
>
关于reactjs - 如何在 react-beautiful-dnd 中禁用一项的可拖动属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64634528/
我正在使用 从网格拖动到树 并使用 gridviewdragdrop 和 treeviewdragdrop 插件来处理页面。 一切正常,但我真的不需要拖动节点,只需要获取 dragdata 和 dro
我有一个 Jest 测试文件,其中包含许多测试。 import React from 'react'; import configureStore from 'redux-mock-store'; i
我有这些简单的表格: 1. USER_DND ╔════════╦══════╗ ║ UserID ║ DnD ║ ╠════════╬══════╣ ╚════════╩══════╝ 2. US
如何在 Android 中以编程方式打开/关闭“请勿打扰”(dnd)?是希望这会给我一些东西,但它没有: Settings.System.putInt(getContentResolver(), Se
我有 37 种不同的节点类型。 我正在尝试实现拖放。 这可行,但我需要准确限制可以拖动哪些类型以及可以删除它们的位置。 不幸的是,我在文档中找不到任何有用的信息(http://www.jstree.c
所以我正在尝试编写一个 D&D 骰子滚轮,它会拉起一个有 5 个按钮的 GUI,当按下时,会随着骰子的滚动拉出一条消息。当我单击 D4 按钮时,它会拉出消息,并且每次单击它时只会滚动 1,依此类推,其
我正在开发一个 React dnd 项目,我遵循 react-dnd documentation 。一切正常,但我无法在拖动时滚动。 当我拖动一个项目并到达最后一个可放置源时,我需要一个滚动条,然后它
有一个项目列表/表格(我相信现在没关系)。它们通过使用 jQuery 变得可拖动。我需要设置一些与被拖动的项目元素关联的数据,并能够从可放置元素的“放置”处理程序中的事件中提取它。 我尝试将 data
我编写了一个基本的 DnD 程序,其中有四个连续的 JLabel。我发觉到当我向左拖动一个标签时,它会显示在下一个标签的下方。然而,当我向右拖动标签时,它显示在下一个标签上方。标签按从左到右的顺序添加
我有一个组件当前使用 useDrag Hook 连接到 react-dnd。它运作良好,除了预览。我想实现 useDragLayer,看看它是否有助于解决我的预览问题,正如许多在线线程所建议的那样。
您好,我需要一个 DnD 解决方案来将 Outlook 邮件附件拖到 Stackpane。 JavaFX/展望 2010 stackpaneDragAndDropZone.setOnDragO
我如何在我的文件中控制台登录我有放置区域,我正在移动的节点的 ID(可拖动项目)。我相信我应该使用 monitor.getItem(),如 documentation 中指定的那样,但我不明白, 我的
看起来 React DnD 期望可拖放的项目是兄弟项目,以便正常工作。如果其中一件元素属于另一位 parent ,我会收到“预期找到有效目标”。一旦拖动事件触发(当交换应该触发时)。 我从他们的文档中
所以我为龙与地下城创建了一个基本的掷骰子 dicord 机器人。 我到目前为止的代码可以掷任何类型的骰子,(例如“roll xdy”“roll 1d20”,“roll 100d100”) 当有人发送匹
在 this Angular example ,如果将一个苹果拖到橙色部分并将其放在那里,则会出现一个动画,慢慢地将苹果返回到它原来的位置。这在视觉上传达了将苹果拖到橙色部分是无效的。使用的Angul
我正在尝试集成React DnD使用 Material UI 的 List 和 ListItem并且,拖动时,整个列表显示为拖动的元素。我已尽我所能理解这些示例,这就是我所拥有的 import Rea
我正在使用 react-beautiful-dnd 使表格行可拖动。 如果我从上到下拖动,则拖动工作正常,并且当我向上滚动页面时,它会脱离位置。 我不知道为什么。 另外,我没有发现 css 有什么奇怪
我在将组件放入应用程序的下一个列表区域时遇到困难。我可以在父列中完美地拖放和排序,但无法将组件放在其他地方。这是我的 onDragEnd 函数中的代码: onDragEnd = result =>
我目前正在尝试使用名为 dnd-kit 的拖放库 及其名为 useSortable 的钩子(Hook)。 到目前为止,我确实做到了让一切都可以按照我喜欢的方式拖动,不幸的是,不知何故我无法根据拖动更新
是否可以使用dojo工具包的dnd api更改头像的位置?此时,拖动时,被拖动项目的头像出现在鼠标光标的右侧和下方。我希望它与鼠标光标位于同一位置。我对我的应用程序进行了一些可用性测试,大多数人似乎尝
我是一名优秀的程序员,十分优秀!