Add support for nested Draggables

[cbachich]

Thanks for the really simple drag and drop. I've noticed that I can't nest Draggable components within each other. This would be VERY useful for what I'm using this for (building nested trees). Any plans on expanding this feature?

Here is an example I cooked up from your demo:

import React     from 'react'
import Draggable from './src/Draggable'
import Droppable from './src/Droppable'

export class Demo extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            draggable : ['drag','us','plz','but-not-me'],
            dropped   : '',
            hovering  : false
        }
    }
    render() {
        let draggable = this.state.draggable.map((title, index) => {
            return (
                <li key={title}>
                    <Draggable enabled={index < 3} type="yolo" data={title}>
                        {title}
                        <ul>
                            <li>
                                <Draggable type="yolo" data={title + '_level2'}>
                                    Level 2
                                </Draggable>
                            </li>
                        </ul>
                    </Draggable>
                </li>
            )
        })
        let droppableStyle = {
            height : '200px'
        }
        if (this.state.hovering) droppableStyle.backgroundColor = 'pink'
        return (
            <div>
                <ul>{draggable}</ul>
                <div style={{border:'1px solid red', width:'200px',height:'200px', position:'relative'}}>
                    <span style={{position:'absolute',float:'left'}}>Drop zone...</span>
                    <Droppable
                        types={['yolo']}
                        style={droppableStyle}
                        onDrop={this.onDrop.bind(this)}
                        onDragEnter={this.onDragEnter.bind(this)}
                        onDragLeave={this.onDragLeave.bind(this)}>
                        <div style={{textAlign:'center', lineHeight:'100px'}}>{this.state.dropped}</div>
                    </Droppable>
                </div>
            </div>
        )
    }
    onDragEnter() {
        this.setState({ hovering : true })
    }
    onDragLeave() {
        this.setState({ hovering : false })
    }
    onDrop(e) {
        this.setState({ hovering : false, dropped : e.yolo })
        clearTimeout(this.dropTimeout)
        this.dropTimeout = setTimeout(() => {
            this.setState({ dropped : '' })
        },1500)
    }
}

[asbjornenge]

Hi friend 😄 Sorry it took forever to get back to you on this. Been on parental leave for 3 months - no energy for computers 😝 This looks like a great idea, and I would be happy to support it 😄 However I don't have any time to work on this right now, but I'll be more than happy to review a pull request for this 👍