Ember.js v0.9.8

HTML

<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-0.9.8.js"></script>
<script type="text/x-handlebars" >
    Drag and drop the green and red box onto the blue one ...
    
    {{view App.Box class="box green"}}
    {{view App.Box class="box red"}}
    
    {{view App.DropTarget class="box blue"}}
    
    
    
    Available Products: 
    {{#each App.productsController}}<br>
      {{name}}
    {{/each}}<br>
    <br>
    
    Shopping Cart:
    {{#each App.addedToCartController}}<br>
      {{name}}<br>
    {{/each}}<br>
    <br>
    
</script>

CSS

.green {
    background-color: green;
}

.red {
    background-color: red;
}

.blue {
    background-color: blue;
}

.box {
    width: 50px;
    height: 50px;
    margin: 20px;
}

JavaScript

App = Ember.Application.create({});


App.Product = Ember.Object.extend({
    name: null,
    isAdded: null
});

App.productsController = Ember.ArrayController.create({
  content: [
      App.Product.create({ name: "MacBook Pro", isAdded: false }),
      App.Product.create({ name: "iPhone", isAdded: false }),
      App.Product.create({ name: "iPad", isAdded: true }),
      App.Product.create({ name: "iTV", isAdded: false })
  ]

});




App.addedToCartController = Em.ArrayController.create({
  contentBinding: Em.Binding.transform(function(value, binding) {
    return value.filter(function(item, index, enumerable) {
      return (item.get('isAdded') == true);
    });
  }).from("App.productsController.content")
});






DragNDrop = Ember.Namespace.create();

DragNDrop.cancel = function(event) {
    event.preventDefault();
    return false;
};

DragNDrop.Draggable = Ember.Mixin.create({
    attributeBindings: 'draggable',
    draggable: 'true',
    dragStart: function(event) {
        var dataTransfer = event.originalEvent.dataTransfer;
        dataTransfer.setData('Text', this.get('elementId'));
    }
});

DragNDrop.Droppable = Ember.Mixin.create({
    dragEnter: DragNDrop.cancel,
    dragOver: DragNDrop.cancel,
    drop: function(event) {
        var viewId = event.originalEvent.dataTransfer.getData('Text');
        Ember.View.views[viewId].destroy();        
        event.preventDefault();
        return false;
    }
});

App.Box = Ember.View.extend(DragNDrop.Draggable);
App.DropTarget = Ember.View.extend(DragNDrop.Droppable);