JSFiddle - React, Tailwind, and code Playground

by dimadima

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="foo"></div>

CSS

p {
    padding-left:60px;
}
#foo {
    border-radius:40px;
    width:40px;
    height:40px;
    background:#c00;
    position:absolute;
    top:0;
    left:0;
    -moz-transition: all 1s;
    -webkit-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
}

JavaScript

var $ = Backbone.$ = jQuery;

var BallModel = Backbone.Model.extend({
});

var $foo = $('#foo');



$(function () {
    $document = $(window);
    var goToMiddle = function () {
        $foo.css({
            left: (0.5 * $document.width() - 0.5 * $foo.width()) + 'px',
            top: (0.5 * $document.height() - 0.5 * $foo.height()) + 'px'
        });
    };
    goToMiddle();
    $document.on('resize', goToMiddle);
});

$(document).on('click', function (e) {
    $foo.css({
        left: (e.clientX - 0.5 * $foo.width()) + 'px',
        top: (e.clientY - 0.5 * $foo.height()) + 'px'
    });
});

var bunghole = {};

_.extend(bunghole, Backbone.Events);
var a = "hello";
var moveBack = function () {
    console.log('done');
}
bunghole.listenTo($('foo')[0], 'transitioned', moveBack)