JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.1/react-with-addons.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.1/JSXTransformer.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>
JavaScript 1.7
/**
* @jsx React.DOM
*/
// https://gist.github.com/NV/8622188
var DeepLinkState = (function() {
function setPath(obj, path, value) {
var leaf = resolvePath(obj, path);
leaf.obj[leaf.name] = value;
}
function getPath(obj, path) {
var leaf = resolvePath(obj, path);
return leaf.obj[leaf.name];
}
function resolvePath(obj, names) {
if (typeof names === 'string') {
names = names.split('/');
}
var lastIndex = names.length - 1;
var current = obj;
for (var i = 0; i < lastIndex; i++) {
var name = names[i];
current = current[name];
}
return {
obj: current,
name: names[lastIndex]
}
}
return {
linkState: function(path, component) {
if (!component) {
component = this;
}
return {
value: getPath(component.state, path),
requestChange: function(newValue) {
setPath(component.state, path, newValue);
component.replaceState(component.state);
}
}
}
};
})();
// https://groups.google.com/d/msg/reactjs/mHfBGI3Qwz4/_vnwOellnyoJ
var SmartSortable = React.createClass({
getDefaultProps: function() {
return {component: React.DOM.ul, childComponent: React.DOM.li};
},
render: function() {
var component = this.props.component;
return this.transferPropsTo(<component />);
},
componentDidMount: function() {
jQuery(this.getDOMNode()).sortable({stop: this.handleDrop});
this.getChildren().forEach(function(child, i) {
jQuery(this.getDOMNode()).append('<' + this.props.childComponent.componentConstructor.displayName + ' />');
var node = jQuery(this.getDOMNode()).children().last()[0];
node.dataset.reactSortablePos = i;
React.renderComponent(cloneWithProps(child), node);
}.bind(this));
},
componentDidUpdate: function() {
var childIndex = 0;
var nodeIndex = 0;
var children = this.getChildren();
var nodes = jQuery(this.getDOMNode()).children();
var numChildren = children.length;
var numNodes = nodes.length;
while (childIndex < numChildren) {
if (nodeIndex >=...