React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Udi Talias

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-0.14.0.js"></script>
<script src="https://fb.me/react-dom-0.14.0.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="root"></div>

CSS

html, body, #root {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.desktop {
    width: 100%;
    height: 100%;
}

.icons-grid {
    position: relative;
    width: 100%;
    height: 100%;
}

.icon {
    position: absolute;
    text-align: center;
    cursor: pointer;
}

.icon .icon-title {
    font-size: 14px;
}

JavaScript 1.7

var draggableConnector = function(WrappedComponent) {
	const Draggable = React.createClass({
    	propTypes: {
        	droppable: React.PropTypes.object,
            onDrop: React.PropTypes.func
        },
        
        getInitialState() {
        	return {
            	moved: false,
                mouseDownTopGap: 0,
                mouseDownLeftGap: 0,
            };
        },
        
        componentDidMount() {
        	this.props.droppable.addEventListener('mousedown', this.onMouseDown);
        },
        
        componentWillUnmount() {
        	this.props.droppable.removeEventListener('mousedown', this.onMouseDown);
        },
        
        onMouseDown(evt) {
	        if (evt.button != 0) return false; // only action button

            var node = ReactDOM.findDOMNode(this.refs.wrappedComp);
            var nodeOffset = $(node).offset();
            
        	this.setState({
            	mouseDownTopGap: evt.pageY - nodeOffset.top,
                mouseDownLeftGap: evt.pageX - nodeOffset.left
            });
        
        	this.props.droppable.addEventListener('mousemove', this.onMouseMove);
			this.props.droppable.addEventListener('mouseup', this.onMouseUp);
        },
        
        onMouseMove(evt) {
        	this.setState({
            	moved: true
            });
            
            var left = (evt.x - this.props.droppable.getBoundingClientRect().left) - this.state.mouseDownLeftGap;
            var top = (evt.y - this.props.droppable.getBoundingClientRect().top) - this.state.mouseDownTopGap;
        },
        
        onMouseUp(evt) {
        	this.props.droppable.removeEventListener('mousemove', this.onMouseMove);
            this.props.droppable.removeEventListener('mouseup', this.onMouseUp);
            
            if(this.state.moved) {
	            this.props.onDrop(this);
            }
            
            this.setState(this.getInitialState());
        },
        
    	render() {
        	return <WrappedComponent...