<h2>MouseDrag Component in Crafty</h2>
<div id="crafty-game"></div>

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Lato';
  margin: 20px auto;
  width: 600px;
  text-align: center;
}

h2 {
  margin: 20px 0;
}

#crafty-game {
  background: #efefef;
}

var stageWidth = 600;
var stageHeight = 400;
var gameScore = 0;

Crafty.init(600, 400, document.getElementById('crafty-game'));

var hBox = Crafty.e("2D, Canvas, Color, Draggable")
  .attr({
    x: 50,
    y: 50,
    w: 50,
    h: 50
  })
  .color("red")
  .dragDirection(0)
  .bind('Dragging', function(evt) {
    this.color("black");
  })
  .bind('StopDrag', function(evt) {
    this.color("red");
  });

var vBox = Crafty.e("2D, Canvas, Color, Draggable")
  .attr({
    x: 500,
    y: 300,
    w: 50,
    h: 50
  })
  .color("purple")
  .dragDirection(90)
  .bind('Dragging', function(evt) {
    this.color("black");
  })
  .bind('StopDrag', function(evt) {
    this.color("purple");
  });

var Box = Crafty.e("2D, Canvas, Color, Draggable")
  .attr({
    x: 275,
    y: 175,
    w: 50,
    h: 50
  })
  .color("green")
  .bind('Dragging', function(evt) {
    this.color("black");
  })
  .bind('StopDrag', function(evt) {
    this.color("green");
  });