JSFiddle - React, Tailwind, and code Playground

by johnthethird

HTML

<script src="http://fb.me/react-with-addons-0.11.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.compat.min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

CSS

.column { display: inline-block;
          padding-right: 15px }

JavaScript 1.7

/** @jsx React.DOM */

// https://groups.google.com/forum/#!searchin/reactjs/sortable/reactjs/mHfBGI3Qwz4/mvo08t9FQAcJ

var SimpleSortable = React.createClass({
    // This wraps a JQuery Sortable around child elements; when a child is dragged
    // and dropped, this simply cancels the JQuery action, calls the onReorder callback,
    // and assumes that the parent will change state and trigger a re-render.

    getDefaultProps: function () {
        return { sortableConfig: {},
                 onReorder: function() {
                     alert('Please give Sortable an onReorder callback.'); },
                 idPrefix: 's0rtableThingie'
               };
    },

    componentDidMount: function () {
        // Now that we have a DOM node, make it a JQueryUi Sortable:
        var config = _.clone(this.props.sortableConfig);
        config.stop = this.handleDrop;
        this.$jq = jQuery(this.getDOMNode());
        this.$jq.sortable(config);
    },

    intToId: function(i) {
        // Make a string that encodes an int for later use.
        return this.props.idPrefix + i;
    },

    idToInt: function(id) {
        // Extract an int from a string made by intToId.
        return parseInt(id.substring(this.props.idPrefix.length));
    },

    handleDrop: function (event) {
        // JQuery Sortable 'toArray' gives an array of element ids in the new sequence.
        // Convert that to an array whose indices are new positions and values are old
        // positions, tell JQuery to cancel, and call onReorder with the array.
        var reordering = this.$jq.sortable('toArray').map(this.idToInt);
        this.$jq.sortable('cancel');
        this.props.onReorder(reordering);
    },

    render: function () {
        // Wrap each child in a div with an id that encodes the original order.
        var wrappedChildren = this.props.children.map(function(child, ix) {
            var id = this.intToId(ix);
            return <div id={id} key={id}>{child}</div>;
       ...