I have the following simple demo for a drag and drop component using React DnD plugin.
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',
}}>
♞
</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);
And then ofcourse i use the simpleDrag element in my app.js to render and i have a working DnD example , now my question is how can i use DnD along site fullcalender.js ? I.E. say i want to make each day cell in the full calender a dropable target how do i do that ?
Fullcalender.js
React DnD
The above code can be found in my github repo HERE.
You can integrate fullcalendar
and react-dnd
using the ThirdPartyDraggable
interface provided by fullcalendar
(docs).
However, it is important to notice that fullcalendar
reacts to mouse events to implement its drag and drop. react-dnd
provides the a html5-backend
, but they don't play together nicely as the HTML5 Drag and Drop API disables mouse events in favour of drag events.
You should thus use an alternative backend that uses those mouse events. E.g. this one.
I implemented a sandbox with an example implementation.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With