react

testing react drag-drop

by amitava82

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="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>

CSS

.tile {
    border: 1px solid #ccc;
    width: 200px;
    height: 300px;
    float: left;
    margin-left: 10px;    
}
.output {
position: relative;
left: 10px;
display: block;
width: 160px;
padding: 8px 10px;
background-color: #F6F6F6;
border-left: solid #01bcfb 4px;
color: #000;
cursor: pointer;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 1px 1px 1px 0 #d2d2d2;
-moz-box-shadow: 1px 1px 1px 0 #d2d2d2;
box-shadow: 1px 1px 1px 0 #d2d2d2;
}

JavaScript 1.7

/** @jsx React.DOM */

var vent = _.extend({}, Backbone.Event);

var Card = React.createClass({

    render: function(){
        var step = this.props.data;

        return (
            <div className="tile">
                <div>{step.name}</div>
                <div>
                    <inputList input={step.input} />
                    <outputList output={step.output} />
                </div>
            </div>
        )
    }
});

var inputList = React.createClass({
    getDefaultProps: function(){
        return {
            input: []
        }
    },
    
    render: function(){
        var inputs = this.props.input.map(function(i){
            return (
                <li key={i.id}>
                    <div className="input">
                        <input type="text" placeholder={i.name} />
                    </div>
                    
                </li>
            )
        }.bind(this));
        return (
            <ul>
                {inputs}                
            </ul>
        )
    }
});

var outputList = React.createClass({
    getDefaultProps: function(){
        return {
            output: []
        }
    },
    
    _onDragStart: function(e){
        
        console.log(e)
    },
    
    _onDragEnd: function(e){
        console.log(e)
    },
    
    _onMouseMove: function(e){
    
    },
    
    render: function(){
        var outs = this.props.output.map(function(i){
            return (
                <li key={i.id}>
                    <div onMouseDown={this._onDragStart} 
                         onMouseUp={this._onDragEnd} 
                         className="output">{i.name}</div>
                    <div className="out-placeholder" />
                </li>
                )
            }.bind(this));
        return (
            <ul>
                {outs}                
            </ul>
        )
    }
});


var app = React.createClass({

    render: function(){
        var cards =...