logo标签列表

如何将React DnD与React FullCalendar集成？

reactjsreact-dnd
15

我有一个使用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？ 例如，如果我想使每个完整日历中的日期单元格成为可放置目标，我该怎么做？

Fullcalender.js

React DnD

以上代码可以在我的 GitHub 存储库 这里 找到。

1
你可以从react-big-calendar中获取灵感。这个日历组件是受到Fullcalendar的启发，并且已经与react-dnd集成。这里有一个工作的react-big-calendar拖放示例，还有源代码。 - Jordan Enev
@JordanEnev 谢谢，这正是我想要了解的内容，但我想知道如何拖放外部事件，现在正在尝试。 - Alexander Solonik
1
这里有一个工作示例（https://fullcalendar.io/docs/external-dragging-demo），其中包含一个外部事件（但使用jQuery可拖动）。因此，根据示例，您必须找到一种方法来获取“DropSource” dom节点元素，并向其添加具有某些Fullcalendar属性的“data”属性。因此，在成功拖放（Fullcalendar“drop”处理程序）时，您必须以某种方式删除“DropSource”，因为它将被添加到Fullcalendar中。 - Jordan Enev
你解决了吗？ - Dupocas
@Dupocas 伙计，我没有做过，但我相信有解决方案。 - Alexander Solonik
你有没有考虑使用Fullcalendar的External Event Dragging功能？可以查看他们的实时演示。也许这正是你所需要的“使每天在完整日历中都成为可放置目标”的功能。如果是这样，我可以尝试编写一个与你的解决方案集成的答案。 - Charles Kornoelje
2个回答
3
您可以使用fullcalendar提供的ThirdPartyDraggable接口（docs）来集成fullcalendar和react-dnd。
但是，请注意，fullcalendar通过鼠标事件实现其拖放功能。 react-dnd提供了一个html5-backend，但它们不能很好地配合使用，因为HTML5拖放API禁用了鼠标事件，而支持拖动事件。
因此，您应该使用使用那些鼠标事件的替代后端。例如this one。
我使用示例实现创建了一个sandbox。
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接