标签: react-dnd

我已经修改了react-dnd 可排序示例,以便在我的应用程序中使用.

我不能让"不透明"跟随我的拖累.

当我最初选择元素时,应用了不透明度:

但是当我向上移动以改变位置时,不透明度仍然应用于原始DOM元素(？).

状态相应地更改,与此状态关联的表中的列正在重新排序.因此,除了不透明之外,其他一切都很好.

当我移动元素时,只有li的值被改变但是data-reactid没有改变位置.

我的应用程序的唯一区别是我如何管理状态.在我的应用程序中,状态通过redux进行管理.

将hover被传递给该DropTarget的功能基本上是从示例复制和粘贴.

SortableColumnEntry组件:

class SortableColumnEntry extends Component {
  render(){
    const { connectDragSource, connectDropTarget } = this.props
    const { column, isDragging, index } = this.props

    const opacity = isDragging ? 0 : 1

    const element = connectDropTarget(connectDragSource(
      <li
        style={{opacity: opacity}}</li>
    ))

    return element
  }
}

export default flow(
  DragSource(DragTypes.COLUMN, source, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
  })),
  DropTarget(DragTypes.COLUMN, target, (connect) => ({
    connectDropTarget: connect.dropTarget()
  }))
)(SortableColumnEntry)

我一直在关注 Egghead 的官方课程（https://egghead.io/lessons/react-reorder-a-list-with-react-beautiful-dnd和示例工作代码： https: //codesandbox.io/s /52p60qqlpp）并写道：

https://codesandbox.io/s/00k3rwq3qn

然而，它实际上并没有拖放。我查看了几个示例，但无法在代码中发现问题。我真的很感谢有人对我的错误提出反馈。

谢谢

所以基本上，当我使用 html5 后端时一切正常，但由于我的应用程序也将在手机上使用，我需要切换到触摸后端。当我这样做时，一切正常，只是我没有看到我正在拖动的项目。掉落区域接受物品，更改课程和所有内容，但我看不到该死的东西，无论是在 PC 上还是在手机上都看不到。我尝试使用 DragPreviewImage 并且它在切换到 html5backend 但没有触摸时工作。

拖动组件：

const [{isDragging}, drag] = useDrag({
    item: {
        type:ItemTypes.CARD,
        name: props.person,
        id: props.id
    },
    collect: monitor => ({
        isDragging: !!monitor.isDragging(),
      }),
})


return (
    <div
    ref={drag}
    className={`${props.classNameToDisplay} ${isDragging ? 'onDrag' : ""}`}
    id={props.id}
    key={props.person}
    onClick={(e) => props.itemOnClick(e, props.person, props.itemClicked)}>
    {props.person}
</div>
);

删除输入组件：

const DropInput = (props) => {

const[{isOver, canDrop}, drop] = useDrop({
    accept:ItemTypes.CARD,
    canDrop:(item, monitor) => true,
    drop: (item, monitor) => props.itemOnDrop(item,monitor, "regularBet", props.itemClicked),
    collect: monitor => ({
        isOver …

我react-dnd在实践中构建了一个钩子 API的最小示例，它遇到了运行时错误：

import { useDrag, useDrop, DndProvider } from "react-dnd";
import { HTML5Backend } from "react-dnd-html5-backend";

export default function App() {
  var matchDrag = useDrag({
    type: "FILE"
  });
  var matchDrop = useDrop({
    accept: "FILE",
    drop: function (item, monitor) {
      console.log("dropped");
    }
  });

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <DndProvider backend={HTML5Backend}>
        <div ref={matchDrag[1]}>Drag</div>
      </DndProvider>
      <DndProvider backend={HTML5Backend}>
        <div ref={matchDrop[1]}>Drop</div>
      </DndProvider>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

这是 CodeSandbox 中的完整复制：https ://codesandbox.io/s/long-rgb-c4i69 ? file =/ src/App.js 。 …

第一次对某些元素重新排序后使用https://www.npmjs.com/package/react-beautiful-dnd ，无法对先前移动的项目进行重新排序，并且控制台会打印

 Unable to find draggable with id: XXX

此外，当拖动另一个项目时，UI 会损坏并且控制台会打印：

Detected non-consecutive <Draggable /> indexes.(This can cause unexpected bugs) 0, [2], 3, 4, 5

在包装我的样式组件时，connectDragSource出现以下错误：

未捕获的错误：现在只能将本机元素节点传递给 React DnD 连接器。您可以将 PaneItemText__StyledItem 包装到 a 中 <div>，或者将其转换为拖动源或放置目标本身。

此消息中的第一个建议是将我的样式组件包装在 中<div>，但这会扰乱我的布局，并且不希望这样做。我不确定第二个选项的建议是什么 - 有人能澄清一下吗？

下面是我正在做的一个粗略的例子：

import React, { Component } from 'react';
import styled from 'styled-components';
import { DragSource } from 'react-dnd';

const StyledComponent = syled.div`
...
`;

class MyComponent extends Component {
    ...
    render() {
        const { connectDragSource } = this.props;
        return connectDragSource(<StyledComponent />)
    }
}

const itemSource = {
    beginDrag(props) {
        /* code here */
    },
    endDrag(props) {
        /* code here */
    } …

我有一个位于react-beautiful-dnd 列表中的材质ui 卡列表。我希望能够将卡片从一个列表移动到另一个列表并重新组织它们（这已经完成）。例如，我还希望能够单击卡片的右下角并根据需要调整其大小。那可能吗？如果是这样，怎么办？我尝试过将卡片包装在像react-grid-layout对象一样的东西中，但没有成功，虽然我的react应用程序仍然出现，但卡片没有渲染。

预先感谢您的任何帮助。

我想按照此处的说明在我的 React 16.12 应用程序中使用 ReactTags - https://www.npmjs.com/package/react-tag-input。我安装了 react-dnd 11.1.1 。下面是我的 package.json 文件

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^7.2.1",
    "bootstrap": "^4.4.1",
    "jquery": "^1.9.1",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-device-detect": "^1.12.1",
    "react-dnd": "^11.1.1",
    "react-dnd-html5-backend": "^11.1.1",
    "react-dom": "^16.12.0",
    "react-hamburger-menu": "^1.2.1",
    "react-native-flash-message": "^0.1.15",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.1",
    "react-tag-input": "^6.4.3",
    "typescript": "^3.8.3"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "NODE_ENV=development react-scripts build",
    "build:prod": "NODE_ENV=production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": …

我有一个组件当前使用useDrag钩子连接到react-dnd。除了预览之外，它运行良好。我想实现useDragLayer来看看它是否能帮助解决我的预览问题，正如许多在线线程所建议的那样。

这是我当前的（简化的）useDrag 实现：

const [{ isDragging }, connectDragSource, connectPreview] = useDrag({
  item,
  collect: monitor => ({
    isDragging: monitor.getItem()?.index === item.index,
  })
})

return (
  <Wrapper ref={connectPreview} isDragging={isDragging}>
    <DragHandle ref={connectDragSource} />
  </Wrapper> 
)

在这种情况下，我该如何使用useDragLayer，以有助于我的预览？文档示例对我来说毫无意义......

如何使用useDragLayerapi 连接渲染的组件？useDragLayer不返回拖动源和预览连接器函数（就像useDrag在返回数组的索引 1 和 2 上所做的那样），并且其收集函数也不提供DragSourceConnector实例。那么调用钩子/返回值后我该如何处理呢？

我在 React 应用程序中创建了一个 SVG 存储库，您可以从中将 SVG 拉到“画布”上。但是，我需要有 SVG 的“无限”副本，这样当你拖出一个时，它的另一个副本也可以无限使用。关于如何做到这一点的任何想法？

我查看了各种拖放包（react-dnd、react-beautiful-dnd），但似乎没有一个具有类似的功能。我唯一的想法是克隆图像 onClick；但这似乎有点hacky。