标签: react-dnd

我正在尝试使用 Rails5、action Cable、React 和 Rails 以及 React DnD 制作 POC。

目的是制作一个类似于 trello 的应用程序，但用于招聘过程。

我的前端是 ReactJS。

我有 3 个组件，首先，容器调用“Candidates”，这个组件调用 2 个调用“Card”组件的“CardBoard”组件。

我用户反应 DnD 库用于可拖动卡片和可放置 CardBoard。当我将卡片放在纸板上时，我使用 post call 和 websocket（来自 rails5 的动作电缆）来更新我的状态。我不明白为什么我在 post call 后收到这条消息：

Uncaught Error: Cannot have two HTML5 backends at the same time.
    at HTML5Backend.setup (eval at <anonymous> (webpack-bundle.self-7b1a342….js?body=1:4175), <anonymous>:87:15)
    at DragDropManager.handleRefCountChange (eval at <anonymous> (webpack-bundle.self-7b1a342….js?body=1:3566), <anonymous>:52:22)
    at Object.dispatch (eval at <anonymous> (webpack-bundle.self-7b1a342….js?body=1:4931), <anonymous>:186:19)
    at HandlerRegistry.addSource (eval at <anonymous> (webpack-bundle.self-7b1a342….js?body=1:3594), <anonymous>:104:18)
    at registerSource (eval at <anonymous> (webpack-bundle.self-7b1a342….js?body=1:4294), <anonymous>:9:27)
    at …

我一直在研究react-dnd(拖放组件).因此,基于鼠标指针识别远滴目标,我想知道是否有任何选项可以更改它,根据拖动对象需要识别的放置目标超过掉落目标的50%.

这与jQuery UI拖放功能类似,后者在droppable元素中包含"tolerance:intersect".

我一直在审查文档和github问题,connectDragPreview对我来说仍然是一个谜.我想定义一个自定义预览,以了解项目在拖动时的显示方式.它应该起作用,就像这里的例子适用于拖动时出现的马图像一样.这是我的代码:

export const tokenCollector: DragSourceCollector = (connect, monitor) => {
  return {
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  };
};

class TokenClass extends React.Component<TokenProps> {
  componentDidMount() {
    const { connectDragPreview } = this.props;
    const img = new Image();
    img.src = '<encoded image>';
    img.onload = () => connectDragPreview(<div>{img}</div>);
  }
  render() {
    const { connectDragSource, isDragging, children } = this.props;
    return connectDragSource(
      <div style={{ opacity: isDragging ? 0.5 : 1 }}>
        {children}
      </div>
    );
  }
}
const dragSource …

我正在尝试创建一个由react-dndframework（？）启用DnD的简单树视图React组件。我尝试了react-sortable-tree，但是由于我现在不记得的原因放弃了它（必须对其进行自定义，但是代码对我来说太复杂了）。到目前为止，我有两个主要组件：树节点本身和包含两个div的的drop overlay，用于在之前和之后进行删除。该节点的编码如下：

class Node extends Component {
    ....

    render() {
        const {
            data,
            depth,
            is_group,
            connectDragSource
        } = this.props;
        ...
        for (let kid_id of kids)
                childElements.push(
                    <ConnectedQuestionNode
                        id={kid_id}
                        is_group={areChildrenGroups}
                        depth={depth + 1}
                        key={kid_id}
                    />);
         return (
            <Fragment>
                {connectDragSource(<div
                    className="tree-row"
                    style = {{ left: treeBlockIndent * depth + 'px' }}
                >
                    {prefix}
                    <div className="tree-row-title">
                        {data.title}
                    </div>
                    <DropOverlay
                        id={data.id}
                        nodeIsGroup={is_group}
                        nodeHasSubgroups={hasSubgroups}
                        moveActionCreator={moveQuestion}
                        moveGroupActionCreator={moveQuestionGroup}
                        nodeItemType={ItemTypes.QUESTION_NODE}
                    />
                </div>)}
                {childElements}
            </Fragment>
        );
    }
}

之后，将其connect编入ConnectedQuestionNode（此处不相关）。这里是 …

我正在尝试创建一个乐观的响应，其中 ui 会通过拖放数据立即更新（最小延迟和更好的用户体验）。然而，我遇到的问题是它无论如何都会滞后。

所以发生的事情是我希望从我的查询中得到一个区域和未分配区域的列表，unassignedZone 是一个对象，其中包含城市，区域是一个区域列表，其中包含城市。在编写我的突变时，我会在拖放它们后返回重新排序的新区域列表。重新排序是由名为“DisplayOrder”的区域对象上的字段完成的。逻辑是正确设置数字。问题是，当我尝试用乐观的 ui 和更新来模仿它时，会有一点延迟，就像它仍在等待网络一样。

我试图实现的大部分内容都发生在 onDragEnd = () => { ... } 函数中。

import React, { Component } from "react";
import { graphql, compose, withApollo } from "react-apollo";
import gql from "graphql-tag";
import { withState } from "recompose";
import { withStyles } from "@material-ui/core/styles";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";
import Input from "@material-ui/core/Input";
import Grid from "@material-ui/core/Grid";
import InputLabel from "@material-ui/core/InputLabel";
import Tabs from "@material-ui/core/Tabs";
import Tab from "@material-ui/core/Tab";
import AppBar from "@material-ui/core/AppBar";
import …

我有一个图像，当我拖动时我也想实现旋转。我想到的解决方案是使用 React DnD 获取拖动图像位置的 xy 坐标并计算原始图像位置之间的差异。这种差异的值将构成进行旋转的基础。

我查看了 ReactDnD 库上的示例，发现 DragSource 规范可以访问 Monitor 变量。这个监控变量可以访问像getInitialClientOffset(). 当我实现console.log()这个值的a 时，它会显示我释放鼠标时的最后一个坐标集。

使用这个库，有没有一种简单的方法可以在我移动鼠标时获取拖动元素的当前位置？

import React from 'react'
import { DragSource } from 'react-dnd'

// Drag sources and drop targets only interact
// if they have the same string type.
// You want to keep types in a separate file with
// the rest of your app's constants.
const Types = {
  CARD: 'card',
}

/**
 * Specifies the drag source contract.
 * Only …

I have a jest test file with a number of tests in it.

import React from 'react';
import configureStore from 'redux-mock-store';
import {Provider} from "react-redux";
import renderer from "react-test-renderer";
import HTML5Backend from "react-dnd-html5-backend";
import {DragDropContextProvider} from "react-dnd";

describe('My Component Tests', () => {
    let mockStore;
    let store;

    beforeEach(() => {
        mockStore = configureStore();
        store = mockStore(mockData);
    });

    test(' test1', () => {
        const cmpt = <Provider store={store}>
            <DragDropContextProvider backend={HTML5Backend}>
                <MyComponent state={1}/>
            </DragDropContextProvider>
        </Provider>;

        const tree = renderer.create(cmpt).toJSON();
        expect(tree).toMatchSnapshot();
    });

    test(' …

当我以自己的方式拖动项目时，我试图定义项目类型。但是，如果我这样做并拖动项目，就会出现问题，它会在删除项目后向我显示“不变违规：必须定义项目类型”。这意味着我有一个包含 ItemTypes 的文件，其中定义了所有内容：

export const ItemTypes = {
    'CARD': "card",
    'PHONE': "phone",
    'WEAPON': "weapon",
    'FOOD': "food",
    'DRINK': "drink"
};

在主库存上，项目数组就像这样

  const [items, setItems] = useState([
    {
      type: "PHONE",
      label: "test",
      itemname: "test",
      pieces: 10,
      itemweight: 0.2
    },
    {
      type: "CARD",
      label: "test5",
      itemname: "test5",
      pieces: 5,
      itemweight: 0.2
    }
  ]);

以及项目组件，我在其中定义被拖动的项目：

const Item = props => {

    const [{ isDragging }, drag] = useDrag({
      item: {
        type: ItemTypes[props.type],
        index: props.index,
        label: props.label,
        itemname: props.name,
        pieces: props.pieces,
        weight: props.itemweight
      },
      collect: …

我正在尝试使用Material UI集成React DnD，并且在拖动时，整个列表显示为拖动的元素。我已尽我所能理解这些示例，这就是我所拥有的ListListItem

import React, { Component, PropTypes } from 'react';
import { Random } from 'meteor/random';
import LocalizedComponent from '/client/components/LocalizedComponent';
// MUI
import { List, ListItem } from 'material-ui/List';
// ---
import { DragDropContext, DragSource, DropTarget } from 'react-dnd';
import { findDOMNode } from 'react-dom';

import HTML5Backend from 'react-dnd-html5-backend';


const itemSource = {
  beginDrag(props) {
    return {
      id: props.id,
      index: props.index
    };
  },
};

const itemTarget = {
  hover(props, monitor, component) {
    const dragIndex …

我可以轻松地进行react-dnd拖动，让单个元素可以拖动，但是我有4个字段的数组，我想使其可拖动。在下面的示例代码中，它通过映射数组创建四个框，每个框都有一个“element”的类名。这应该使它们都可以拖动，但它们不会移动。

这是我的拖动代码：

 const ELEMENT = 'element';
    const [{ isDragging }, drag, dragPreview] = useDrag(() => ({
      type: ELEMENT,
      collect: (monitor) => ({
        isDragging: monitor.isDragging()
      })
    }))

这是我的可拖动元素：

 {FieldDetail.map((e,i) =>  
   <div key={i} ref={dragPreview} style={{ opacity: isDragging ? 0.5 : 1}}>
        <div className='element' ref={drag}></div>            
    </div>          
  )} 

有任何想法吗？我需要在类型或类名中做更多的事情吗？