Question

我正在使用fullcalender和Reactjs DnD插件，基本上我想做的是将drop和外部事件放入日历中，就像HERE一样。

所以我有以下组件。

fullcalender.js（Droptarget）

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


const ItemTypes = {
    CARD: 'card'
};

const cardSource = {
    beginDrag(props) {
      return {  };
    },

    endDrag(props, monitor) {
      const item = monitor.getItem()
      const dropResult = monitor.getDropResult()

      if (dropResult) {
        alert(`You dropped ${item.name} into ${dropResult.name}!`)
      }
    },
}

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);

card.js（拖动来源）

import React, { Component } from 'react';

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

class simpleDrag extends Component {

    render() {
        return(
            <DragDropContextProvider backend={HTML5Backend}>
                <div>
                    <CARD/>
                    <Calder />
                </div>    
            </DragDropContextProvider>
        ); 
    }

} 

export default DragDropContext(HTML5Backend)(simpleDrag);

simpleDrag.js（父组件）

card

现在上面的代码工作正常，I.E。我可以拖动<?php mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT); $conn = new mysqli('localhost','root','','test'); if (isset($_POST['submit'])){ $build = ""; if(!empty($_POST['city'])){ $city=$_POST['city']; $build.= "AND city= $city "; } if(!empty($_POST['type'])){ $type=$_POST['type']; $build.= "AND type = $type "; } $build= substr_replace($build,'',0,3); $sql = "SELECT * FROM proizvodi WHERE $build"; $search=$conn->query($sql); $num = $search->num_rows; if($num>0){ echo "<table>"; while($row = $search->fetch_object()){ echo "<tr>"; echo "<td>".$row->name."</td>"; echo "<td>".$row->surname."</td>"; echo "<td>".$row->price."</td>"; echo "</tr>"; } echo "</table>"; } }else{ echo "Put some value"; } ?> <form action="" method="post"> <input type="text" name="house" id="city"/>City <input type="text" name="flat" id="type"/>Type <input type="submit" name="submit" id="submit" value="Submit"/> </form>，但我想要做的就是拖动卡片并将其粘贴到日历上，就像示例HERE中一样。我该怎么做？

注意:: - 上面的代码也可以在github上找到HERE。

如何将外部事件/元素拖入reactjs中的fullcalender

0 个答案: