title: Move Ember object from one list to another with drag-and-drop
body: <p>I'm trying to drag Ember objects from one list to another. If I drag an item to a new list, the item should be removed from its current list and moved to the new one. </p>
  
  <p>Thanks to <a href="https://stackoverflow.com/questions/10739322/dragdrop-with-ember-js">Drag&amp;Drop with Ember.js</a> and <a href="https://stackoverflow.com/questions/12799126/ember-js-drag-and-drop-list">Ember.js - drag and drop list</a>, I figured out how to copy an item to a different list. However, I am unable to determine from which list a dragged object originated. I have dozens of lists on the page, so I'd rather not do a O(n*k) search for the original object.</p>
  
  <p>Currently, I'm using Ember views and the HTML 5 API. It seems like the Handelbars <code>action</code> helper should achieve my goal more easily. Ember's <code>action</code> supports the <code>drop</code> event, but I can't get it to fire: <code>{{ action foo on="drop" }}</code>. It probably has something to do with the nuanced event propagation defaults of the HTML 5 drag-and-drop implementation. </p>
  
  <p>If you know how to solve this problem using actions instead of views, I'd much prefer that solution.</p>
  
  <p>Here's how I'm currently transferring objects:</p>
  
  <pre><code>// this is heavily inspired by http://jsfiddle.net/ud3323/5uX9H/
  // Draggable items
  App.ItemView = Ember.View.extend({
      templateName: 'item',
      attributeBindings: 'draggable',
      draggable: 'true',
      dragStart: function(event) {
          var dataTransfer = event.originalEvent.dataTransfer;
          // The view's context is the item to transfer
          var item = this.get('context');
          // Use HTML 5 API to transfer object as JSON.
          // There must be a more elegant way to do this.
          dataTransfer.setData('application/json', JSON.stringify(item));
      }
  });
  
  // Item list drop zone
  App.ItemListView = Ember.View.extend({
      templateName: 'itemList',
      dragEnter: function(event) {
          event.preventDefault();
          return false;
      },
      dragOver: function(event) {
          event.preventDefault();
          return false;
      },
      drop: function(event) {
          event.preventDefault();
  
          // Extract the transferred data
          var rawData = event.dataTransfer.getData('application/json');
  
          // Create a new Ember object from the data
          var item = App.Todo.create(JSON.parse(rawData));
          this.get('controller').send('add', item);
          return false;
      }
  });
  </code></pre>
  
  <p>Check out <a href="http://jsbin.com/ibufeh/2/edit" rel="nofollow noreferrer">JS Bin for the complete code</a>.</p>
  
  <p>Thanks in advance for your help. Very much appreciated.</p>