JSFiddle - React, Tailwind, and code Playground

by evan

HTML

<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
<script src="http://fb.me/react-with-addons-0.10.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.viewport {
    position: absolute;
    top: 0;
    left: 0;
    width: 500px;
    height: 500px;
}

.dragtile {
    width: 80px;
    height: 80px;
    position: absolute;
    border: 1px dotted black;
    
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

h1 {
    text-align: center;
}
}

JavaScript 1.7

/** @jsx React.DOM */

React.initializeTouchEvents(true);

var DragTile = React.createClass({
    static: {
        edge: 80
    },
    propTypes: {
        dx: React.PropTypes.number,
        dy: React.PropTypes.number,
        x: React.PropTypes.number,
        y: React.PropTypes.number
    },
    virtualPosition: function (delta, offset) {
        var vpos = 0 - delta;
        vpos /= this.static.edge;
        
        if (vpos < 0) {
            vpos = Math.ceil(vpos);
        } else {
            vpos = Math.floor(vpos);
        }
        
        return vpos += offset;
        
    },
    render: function () {
        var edge = this.static.edge,
            x = this.props.x * edge,
            y = this.props.y * edge,
            style = {
                left: this.props.x * edge,
                top: this.props.y * edge
            };
    
        // virtual position
        var vPos = {
            x: this.virtualPosition(this.props.dx, this.props.x),
            y: this.virtualPosition(this.props.dy, this.props.y)
        };
        
        var el;
            el = (<p>
                    {vPos.x +','+ vPos.y}
                </p>);
    
        return (<div
                    className="dragtile"
                    style={style}
                >
                {el}
            </div>);
    }
});

var Viewport = React.createClass({
    getInitialState: function () {
        return {
            mouseDown: false,
            dx: 0,
            dy: 0
        };
    },
    startPosition: {
        x: null,
        y: null,
        dx: null,
        dy: null
    },
    onMouseUpOrDown: function (e) {

        this.startPosition.x = e.clientX;
        this.startPosition.y = e.clientY;
        this.startPosition.dx = this.state.dx;
        this.startPosition.dy = this.state.dy;

        this.setState({
            mouseDown: e.type === 'mousedown' || e.type === 'touchstart'
        });
    },
    onMouseMove: function (e) {
        if...