diff --git a/examples/demos/dndOutsideSource.js b/examples/demos/dndOutsideSource.js
index fb7c95dc7..979b5b9c5 100644
--- a/examples/demos/dndOutsideSource.js
+++ b/examples/demos/dndOutsideSource.js
@@ -21,11 +21,22 @@ class Dnd extends React.Component {
item1: 0,
item2: 0,
},
+ displayDragItemInCell: true,
}
}
- handleDragStart = name => {
- this.setState({ draggedEvent: name })
+ handleDragStart = event => {
+ this.setState({ draggedEvent: event })
+ }
+
+ handleDisplayDragItemInCell = () => {
+ this.setState({
+ displayDragItemInCell: !this.state.displayDragItemInCell,
+ })
+ }
+
+ dragFromOutsideItem = () => {
+ return this.state.draggedEvent
}
customOnDragOver = event => {
@@ -43,14 +54,14 @@ class Dnd extends React.Component {
onDropFromOutside = ({ start, end, allDay }) => {
const { draggedEvent, counters } = this.state
const event = {
- title: formatName(draggedEvent, counters[draggedEvent]),
+ title: formatName(draggedEvent.name, counters[draggedEvent.name]),
start,
end,
isAllDay: allDay,
}
const updatedCounters = {
...counters,
- [draggedEvent]: counters[draggedEvent] + 1,
+ [draggedEvent.name]: counters[draggedEvent.name] + 1,
}
this.setState({ draggedEvent: null, counters: updatedCounters })
this.newEvent(event)
@@ -114,16 +125,35 @@ class Dnd extends React.Component {
render() {
return (
-
- Outside Drag Sources
- {Object.entries(this.state.counters).map(([name, count]) => (
+
+
+
+ Outside Drag Sources
+
+ {Object.entries(this.state.counters).map(([name, count]) => (
+
+ this.handleDragStart({ title: formatName(name, count), name })
+ }
+ >
+ {formatName(name, count)}
+
+ ))}
this.handleDragStart(name)}
+ onDragStart={() => this.handleDragStart('undroppable')}
>
- {formatName(name, count)}
+ Draggable but not for calendar.
- ))}
-
this.handleDragStart('undroppable')}
- >
- Draggable but not for calendar.
+
+
+
+
{
+ if (!this.context.draggable.dragFromOutsideItem) return
+
+ const bounds = getBoundsForNode(node)
+
+ this.handleDropFromOutside(point, bounds)
+ })
+
selector.on('selectStart', () => this.context.draggable.onStart())
selector.on('select', point => {
diff --git a/src/addons/dragAndDrop/WeekWrapper.js b/src/addons/dragAndDrop/WeekWrapper.js
index f44c343f7..bbcac6c14 100644
--- a/src/addons/dragAndDrop/WeekWrapper.js
+++ b/src/addons/dragAndDrop/WeekWrapper.js
@@ -39,6 +39,7 @@ class WeekWrapper extends React.Component {
dragAndDropAction: PropTypes.object,
onDropFromOutside: PropTypes.func,
onBeginAction: PropTypes.func,
+ dragFromOutsideItem: PropTypes.func,
}),
}
@@ -78,8 +79,8 @@ class WeekWrapper extends React.Component {
this.setState({ segment })
}
- handleMove = ({ x, y }, node) => {
- const { event } = this.context.draggable.dragAndDropAction
+ handleMove = ({ x, y }, node, draggedEvent) => {
+ const { event = draggedEvent } = this.context.draggable.dragAndDropAction
const metrics = this.props.slotMetrics
const { accessors } = this.props
@@ -122,6 +123,16 @@ class WeekWrapper extends React.Component {
})
}
+ handleDragOverFromOutside = ({ x, y }, node) => {
+ if (!this.context.draggable.dragFromOutsideItem) return
+
+ this.handleMove(
+ { x, y },
+ node,
+ this.context.draggable.dragFromOutsideItem()
+ )
+ }
+
handleResize(point, node) {
const { event, direction } = this.context.draggable.dragAndDropAction
const { accessors, slotMetrics: metrics } = this.props
@@ -220,6 +231,14 @@ class WeekWrapper extends React.Component {
this.handleDropFromOutside(point, bounds)
})
+ selector.on('dragOverFromOutside', point => {
+ if (!this.context.draggable.dragFromOutsideItem) return
+
+ const bounds = getBoundsForNode(node)
+
+ this.handleDragOverFromOutside(point, bounds)
+ })
+
selector.on('click', () => this.context.draggable.onEnd(null))
}
diff --git a/src/addons/dragAndDrop/withDragAndDrop.js b/src/addons/dragAndDrop/withDragAndDrop.js
index b81d55f81..9ffa75b54 100644
--- a/src/addons/dragAndDrop/withDragAndDrop.js
+++ b/src/addons/dragAndDrop/withDragAndDrop.js
@@ -72,6 +72,8 @@ export default function withDragAndDrop(Calendar) {
onDragOver: PropTypes.func,
onDropFromOutside: PropTypes.func,
+ dragFromOutsideItem: PropTypes.func,
+
draggableAccessor: accessor,
resizableAccessor: accessor,
@@ -100,6 +102,7 @@ export default function withDragAndDrop(Calendar) {
onEnd: PropTypes.func,
onBeginAction: PropTypes.func,
onDropFromOutside: PropTypes.fun,
+ dragFromOutsideItem: PropTypes.fun,
draggableAccessor: accessor,
resizableAccessor: accessor,
dragAndDropAction: PropTypes.object,
@@ -127,6 +130,7 @@ export default function withDragAndDrop(Calendar) {
onEnd: this.handleInteractionEnd,
onBeginAction: this.handleBeginAction,
onDropFromOutside: this.props.onDropFromOutside,
+ dragFromOutsideItem: this.props.dragFromOutsideItem,
draggableAccessor: this.props.draggableAccessor,
resizableAccessor: this.props.resizableAccessor,
dragAndDropAction: this.state,