JSFiddle - React, Tailwind, and code Playground

by erick

HTML

<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.6/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

<div id="page" style="width:1000px;height:1000px;">
    <div class='shape' />
</div>

CSS

.shape {
    position: absolute;
}

JavaScript

var Shape = Backbone.Model.extend({
    defaults: { x:50, y:50, width:150, height:150, color:'black' ,cursor:'pointer'},
    setTopLeft: function(x,y) {
        this.set({ x:x, y:y });
    },
    setDim: function(w,h) {
        this.set({ width:w, height:h });
    },
});

var shape = new Shape();

shape.bind('change', function() { 
    $('.shape').css({ left:       shape.get('x'),
                      top:        shape.get('y'),
                      width:      shape.get('width'),
                      height:     shape.get('height'),
                      background: shape.get('color'),
                      cursor:     shape.get('cursor') }); 
});

shape.setTopLeft(100, 300);

var dragging = false;

$('.shape').mousedown(function (e) { 
    dragging = true;
    shape.set({ color: 'gray' }); 
});

$('#page').mouseup(function () { 
    dragging = false;
    shape.set({ color: 'black'}); 
});

$('#page').mousemove(function(e) {
    if(dragging) {
        shape.setTopLeft(e.pageX, e.pageY);
    }
});