如何将反应 DnD 与反应全日历集成？答案

【问题标题】：How to integrate react DnD with react fullcalendar?如何将反应 DnD 与反应全日历集成？
【发布时间】：2018-11-11 00:31:38
【问题描述】：

我有以下使用 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, monitor) {
    return {
       connectDragSource : connect.dragSource(),
       connectDragPreview: connect.dragPreview(),
       isDragging : monitor.isDragging()
    } 
}

class Card extends Component {

    render() {
        const { connectDragSource , isDragging } = this.props;

        return connectDragSource( 
          <div style={{
            opacity : isDragging ? 0.5 : 1,
            height: '50px',
            width: '50px',
            backgroundColor: 'orange',
          }}>
            &#9822;
          </div>
        );
      }

}

export default DragSource(ItemTypes.CARD, cardSource , collect)(Card);

Box.js（放置目标）

import React, { Component } from 'react';
import { DropTarget } from 'react-dnd';


const boxTarget = {
    canDrop(props) {

    },

    drop(props) {

    }
};

function collect(connect, monitor) {
    return {
      connectDropTarget: connect.dropTarget(),
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop()
    };
}

const ItemTypes = {
    CARD: 'card'
};


class Box extends Component {

    render() {
        const { connectDropTarget, isOver, canDrop } = this.props;

        return connectDropTarget(
          <div style={{
            position: 'relative',
            width: '200px',
            height: '200px',
            background: canDrop ? '#ff0000' : '#eee'
          }}>
              { this.props.children }
          </div>
        );
    }

}

export default DropTarget(ItemTypes.CARD, boxTarget, collect)(Box);

simpleDrag.js

import React, { Component } from 'react';

import { DragDropContext } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';
import CARD from './card';
import BOX from './box';

class simpleDrag extends Component {

    render() {
        return(
            <div>
                <BOX />
                <CARD/>
            </div>    
        ); 
    }

} 

export default DragDropContext(HTML5Backend)(simpleDrag);

当然，我在 app.js 中使用 simpleDrag 元素进行渲染，并且我有一个有效的 DnD 示例，现在我的问题是如何在站点 fullcalender.js 中使用 DnD？ IE。说我想让完整日历中的每一天单元格成为可放置的目标，我该怎么做？

Fullcalender.js

React DnD

以上代码可以在我的github repoHERE中找到。

【问题讨论】：

您可以从react-big-calendar 获得见解。此日历的灵感来自 Fullcalendar，并且已经与 react-dnd 集成。 Here's a working react-big-calendar 的拖放演示 + 有源代码。
@JordanEnev 谢谢，我正在调查，但我想知道如何拖放外部事件，现在就尝试这样做。
Here's a working example 带有外部事件（但使用 jQuery 可拖动）。因此，根据示例，您必须找到一种方法来获取 DropSource dom 节点元素并向其添加具有一些 Fullcalendar 属性的 data 属性。因此，在成功删除（Fullcalendar drop 处理程序）时，您必须以某种方式删除 DropSource，因为它将被添加到 Fullcalendar。
你解决了吗？
@Dupocas 伙计我没有，我确定有解决方案，但我还没有研究过

标签： reactjs react-dnd

【解决方案1】：

作为记录，钩子（React 在功能组件中涉及）不能在基于类的组件中使用 (https://reactjs.org/warnings/invalid-hook-call-warning.html)。

您可能需要考虑将 Card 和 Box 重写为 RFC 而不是 RCC。

【讨论】：

【解决方案2】：

您可以使用fullcalendar（docs）提供的ThirdPartyDraggable接口集成fullcalendar和react-dnd。

但是，重要的是要注意fullcalendar 对鼠标事件做出反应以实现其拖放。 react-dnd 提供了 html5-backend，但它们不能很好地配合使用，因为 HTML5 拖放 API 禁用鼠标事件以支持拖动事件。

因此，您应该使用使用这些鼠标事件的替代后端。例如。 this one.

我通过示例实现实现了sandbox。

【讨论】：