React Base Fiddle (JSX)

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

by huang47

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/JSXTransformer.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.1/react-with-addons.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration.js"></script>

<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

CSS

.comp {
    position: absolute;
    width: 100px;
    height: 100px;
    background: pink;
}

JavaScript 1.7

/**
 * A helper to check if given object is valid.
 *
 * @module utils
 */
var is = {

    /**
     * return true if given `o` is a function
     *
     * @method function
     * @param {Object} o
     * @return {Boolean}
     */
    "function": function isFunction(o) {
        return 'function' === typeof o;
    },

    /**
     * return true if given `o` is not undefined
     *
     * @method defined
     * @param {Object} o
     * @return {Boolean}
     */
    defined: function isDefined(o) {
        return undefined !== o;
    }
};

function didTouchMove(e) {
    this.__Draggable_requestingTouchMove = false;
    if (this.isMounted()) {
        this.onDrag(this.__Draggable_dragData);
    }
}

function requestTouchMove(e) {
    if ( ! this.__Draggable_requestingTouchMove) {
        this.__Draggable_requestingTouchMove = true;
        this.__Draggable_touchMoveRaf = window.requestAnimationFrame(didTouchMove.bind(this));
    }
}

/**
 * @private
 * @method getDragDataFromEvent
 * @param {SyntheticTouchEvent} e
 * @return {Object} e
 * @return {Number} e.x drag x axis
 * @return {Number} e.y drag y axis
 * @return {Object} e.data
 */
function getDragDataFromEvent(e) {
    var touch,
        boundary,
        x,
        y;

    touch = e.touches[0];
    boundary = this.props.boundary || {};
    x = touch.pageX;
    y = touch.pageY;

    if (is.defined(boundary.left) && x < boundary.left) {
        x = boundary.left;
    } else if (is.defined(boundary.right) && x > boundary.right) {
        x = boundary.right;
    }

    if (is.defined(boundary.bottom) && y > boundary.bottom) {
        y = boundary.bottom;
    } else if (is.defined(boundary.top) && y < boundary.top) {
        y = boundary.top;
    }
    
    return {
        data: is.function(this.getDragData) ? this.getDragData(e) : {},
        x: x,
        y: y
    };
}

/**
 * A mixin to manage touch events and invoke
 * onDrag / onDrop when necessary
 *
 * getDragData:
 * A function to collect `touchmove` event...