Ember Drag and Drop demo

Answer to: http://stackoverflow.com/questions/10762484/ember-js-html5-drag-and-drop-shopping-cart-demo

by kadactivity

HTML

<script src="http://builds.emberjs.com.s3.amazonaws.com/ember-latest.min.js"></script>

  <script type="text/x-handlebars" >  
    <b>Available Products</b>
    <br /><br />
    {{#each product in model}}
      {{#view App.ProductView contentBinding="product"}}
        {{view.content.name}}
      {{/view}}<br />
    {{/each}}
    <hr />
    
    {{#view App.ProductDropTarget 
      dragContextBinding="currentDragItem"}}
    Shopping Cart
    <div style="height: 20px">{{helpText}}</div>
    {{/view}}
    <br />
    {{#each cart in productsInCart}}
      {{#view App.ProductView contentBinding="cart"}}
        {{view.content.name}}
      {{/view}}<br />
    {{/each}}    
</script>

CSS

.dropTarget {
    width: 200px;
    padding: 20px;
    background-color: #2355A1;
    color: white;
}

.cart-add {
    background-color: #55A122;
}

.cart-remove {
    background-color: #A12255;
}

JavaScript

App = Ember.Application.create();

App.Router.map(function() {
  // put your routes here
});

App.ApplicationRoute = Ember.Route.extend({
  model: function() {
    return [
      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 })
    ];
  }
});

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) {
    event.preventDefault();
    return false;
  }
});

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

App.ProductView = Ember.View.extend(DragNDrop.Draggable, {
  tagName: "span",
  
  // .setDragImage (in #dragStart) requires an HTML element as the first argument
  // so you must tell Ember to create the view and it"s element and then get the 
  // HTML representation of that element.
  dragIconElement: Ember.View.create({
    attributeBindings: ["src"],
    tagName: "img",
    src: "http://twitter.com/api/users/profile_image/twitter"
  }).createElement().get("element"),
    
  dragStart: function(event) {
    this._super(event);
    // Let the controller know this view is dragging
    this.set("content.isDragging", true);
    
    // Set the drag image and location relative to the mouse/touch event
    var dataTransfer = event.originalEvent.dataTransfer;
    dataTransfer.setDragImage(this.get("dragIconElement"), 24, 24);
  },
    
  dragEnd: function(event) {
    // Let the controller know this view is done dragging
...