Question

我有一个使用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 （Droptarget）

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？ I.E.假设我想让完整日历中的每一天细胞成为一个可丢弃的目标我该如何做？

Fullcalender.js

React DnD

上面的代码可以在我的github repo HERE中找到。

Answer 1

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

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

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

我用一个示例实现实现了一个 sandbox。

如何整合反应DnD与反应fullcalendar？

1 个答案: