example: add MultiDropTargets examples

Author: Dang Hai An

example/src/App.js

@@ -3,15 +3,15 @@ import { DragDropContext } from 'react-dnd'
 import MouseBackend from 'react-dnd-mouse-backend'
 import CSV from './CSV'
 import NormalDiv from './NormalDiv'
+import MultipleTargets from './MultipleTargets'
 
 const App = React.createClass({
   render() {
     return (
-      <div>
-        <h3>CSV Elements</h3>
+      <div style={{ display: 'flex', height: '50vh', justifyContent: 'space-between' }}>
         <CSV/>
-        <h3>Normal Div</h3>
         <NormalDiv/>
+        <MultipleTargets />
       </div>
     )
   }

example/src/CSV/Target.js

@@ -8,7 +8,8 @@ const styles = {
   width: 300,
   height: 300,
   border: '1px solid black',
-  position: 'relative'
+  position: 'relative',
+  flex: 1
 }
 
 const boxTarget = {
@@ -74,6 +75,7 @@ Target.propTypes = {
   connectDropTarget: PropTypes.func.isRequired
 }
 
-export default DropTarget(ItemTypes.CSV, boxTarget, connect => ({
-  connectDropTarget: connect.dropTarget()
+export default DropTarget(ItemTypes.CSV, boxTarget, (connect, monitor) => ({
+  connectDropTarget: connect.dropTarget(),
+  isOver: monitor.isOver(),
 }))(Target)

example/src/CSV/index.js

@@ -20,7 +20,8 @@ const DragAroundCSV = React.createClass({
     const { hideSourceOnDrag } = this.state
 
     return (
-      <div>
+      <div><div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+        <h3>CSV Elements</h3>
         <Target hideSourceOnDrag={hideSourceOnDrag} />
         <p>
           <label>
@@ -30,7 +31,7 @@ const DragAroundCSV = React.createClass({
             <small>Hide source while dragging</small>
           </label>
         </p>
-      </div>
+      </div></div>
     )
   }
 })

example/src/MultipleTargets/Source.js

@@ -0,0 +1,52 @@
+import React, { PropTypes } from 'react'
+import ItemTypes from '../ItemTypes'
+import { DragSource } from 'react-dnd'
+
+const style = {
+  position: 'absolute',
+  border: '1px dashed gray',
+  backgroundColor: 'white',
+  padding: '4px',
+  cursor: 'move',
+  zIndex: 1,
+  cursor: 'pointer',
+  userSelect: 'none'
+}
+
+const boxSource = {
+  beginDrag(props) {
+    const { id, left, top } = props
+    return { id, left, top }
+  }
+}
+
+const Source = React.createClass({
+  propTypes: {
+    connectDragSource: PropTypes.func.isRequired,
+    isDragging: PropTypes.bool.isRequired,
+    id: PropTypes.any.isRequired,
+    left: PropTypes.number.isRequired,
+    top: PropTypes.number.isRequired,
+    hideSourceOnDrag: PropTypes.bool.isRequired,
+    children: PropTypes.node
+  },
+  render() {
+    const {
+      hideSourceOnDrag, left, top, connectDragSource, isDragging, children
+    } = this.props
+    if (isDragging && hideSourceOnDrag) {
+      return null
+    }
+
+    return connectDragSource(
+      <div style={{ ...style, left, top }}>
+        {children}
+      </div>
+    )
+  }
+})
+
+export default DragSource(ItemTypes.BOX, boxSource, (connect, monitor) => ({
+  connectDragSource: connect.dragSource(),
+  isDragging: monitor.isDragging()
+}))(Source)

example/src/MultipleTargets/Sources.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import Source from './Source'
+
+const Sources = React.createClass({
+
+  render() {
+    const { hideSourceOnDrag, boxes } = this.props
+
+    return (
+      <div>
+        {Object.keys(boxes).map(key => {
+          const { left, top, title } = boxes[key]
+          return (
+            <Source key={key}
+                 id={key}
+                 left={left}
+                 top={top}
+                 hideSourceOnDrag={hideSourceOnDrag}>
+              {title}
+            </Source>
+          )
+        })}
+      </div>
+    )
+  }
+})
+
+export default Sources

example/src/MultipleTargets/Target.js

@@ -0,0 +1,49 @@
+import React, { PropTypes } from 'react'
+import ItemTypes from '../ItemTypes'
+import { DropTarget } from 'react-dnd'
+
+const styles = {
+  position: 'absolute',
+  width: 80,
+  height: 80,
+  border: '1px solid #ccc',
+  flex: 1
+}
+
+const boxTarget = {
+  drop(props, monitor, component) {
+    const item = monitor.getItem()
+    const delta = monitor.getDifferenceFromInitialOffset()
+    const left = Math.round(item.left + delta.x)
+    const top = Math.round(item.top + delta.y)
+
+    component.moveBox(item.id, left, top)
+  }
+}
+
+const Target = React.createClass({
+  moveBox(id, left, top) {
+    if (this.props.isOccupied()) {
+      alert('This box is occupied !')
+      return
+    }
+    this.props.moveBox(id, left, top, this.props.id)
+  },
+  render() {
+    const { connectDropTarget, left, top } = this.props
+
+    return connectDropTarget(
+      <div style={{ ...styles, left, top }}>
+
+      </div>
+    )
+  }
+})
+
+Target.propTypes = {
+  connectDropTarget: PropTypes.func.isRequired
+}
+
+export default DropTarget(ItemTypes.BOX, boxTarget, connect => ({
+  connectDropTarget: connect.dropTarget()
+}))(Target)

example/src/MultipleTargets/Targets.js

@@ -0,0 +1,34 @@
+import React from 'react'
+import Target from './Target'
+
+const Targets = React.createClass({
+
+  render() {
+    const { moveBox, isOccupied, } = this.props
+    const targets = [{
+      left: 10, top: 10, id: '1'
+    }, {
+      left: 10, top: 205, id: '2'
+    }, {
+      left: 205, top: 205, id: '3'
+    }, {
+      left: 205, top: 10, id: '4'
+    }]
+
+    return (
+      <div>
+        {targets.map(target => {
+          return (
+            <Target
+              moveBox={moveBox} key={target.id} left={target.left} top={target.top}
+              id={target.id}
+              isOccupied={() => isOccupied(target.id)}
+            />
+          )
+        })}
+      </div>
+    )
+  }
+})
+
+export default Targets

example/src/MultipleTargets/index.js

@@ -0,0 +1,72 @@
+/* eslint-disable max-len */
+import React from 'react'
+import update from 'react/lib/update'
+
+import Sources from './Sources'
+import Targets from './Targets'
+
+const DragAroundNaive = React.createClass({
+  getInitialState() {
+    return {
+      boxes: {
+        'a': { top: 50, left: 140, title: '0' },
+        'b': { top: 180, left: 20, title: '0' },
+        'c': { top: 90, left: 40, title: '0' },
+        'd': { top: 230, left: 160, title: '0' },
+        'e': { top: 140, left: 150, title: '0' }
+      },
+      hideSourceOnDrag: true
+    }
+  },
+
+  moveBox(id, left, top, title) {
+    this.setState(update(this.state, {
+      boxes: {
+        [id]: {
+          $merge: {
+            left: left,
+            top: top,
+            title: title
+          }
+        }
+      }
+    }))
+  },
+
+  isOccupied(id) {
+    return Object.values(this.state.boxes).filter(box => box.title === id).length >= 1
+  },
+
+  handleHideSourceClick() {
+    this.setState({
+      hideSourceOnDrag: !this.state.hideSourceOnDrag
+    })
+  },
+
+  render() {
+    const { hideSourceOnDrag, boxes } = this.state
+
+    return (
+      <div><div style={{
+        display: 'flex', flexDirection: 'column', flex: 1,
+      }}>
+        <h3>Multiple Drop Targets</h3>
+        <div style={{ position: 'relative', width: '300px',
+          height: '300px', border: '1px solid black' }}>
+          <Sources hideSourceOnDrag={hideSourceOnDrag} boxes={boxes} />
+          <Targets moveBox={this.moveBox} isOccupied={this.isOccupied} />
+        </div>
+        <p>
+          <label>
+            <input type="checkbox"
+                   checked={hideSourceOnDrag}
+                   onChange={this.handleHideSourceClick} />
+            <small>Hide source while dragging</small>
+          </label>
+        </p>
+      </div></div>
+    )
+  }
+})
+
+export default DragAroundNaive

example/src/NormalDiv/Target.js

@@ -8,7 +8,8 @@ const styles = {
   width: 300,
   height: 300,
   border: '1px solid black',
-  position: 'relative'
+  position: 'relative',
+  flex: 1
 }
 
 const boxTarget = {

example/src/NormalDiv/index.js

@@ -19,7 +19,8 @@ const DragAroundNaive = React.createClass({
     const { hideSourceOnDrag } = this.state
 
     return (
-      <div>
+      <div><div style={{ display: 'flex', flexDirection: 'column', flex: 1 }}>
+        <h3>Normal Div</h3>
         <Target hideSourceOnDrag={hideSourceOnDrag} />
         <p>
           <label>
@@ -29,7 +30,7 @@ const DragAroundNaive = React.createClass({
             <small>Hide source while dragging</small>
           </label>
         </p>
-      </div>
+      </div></div>
     )
   }
 })