var Droppable = ic.Droppable.default;
 
// first mix Droppable into a component
App.XDropComponent = Ember.Component.extend(Droppable, {
 
  tagName: 'x-drop',
 
  // Next define a validateDragEvent method, native draggables have
  // data types that you can read while the drag is moving over your
  // component.
 
  validateDragEvent: function(event) {
    return event.dataTransfer.types.contains('text/x-drag');
  },
 
  // Finally, define an acceptDrop method to do whatever you need to
  // do when the user drops on your component.
 
  acceptDrop: function(event) {
    var data = event.dataTransfer.getData('text/x-drag');
    alert(data);
  }
});
 
// And just for demonstration, here's a simple draggable element.
 
App.XDragComponent = Ember.Component.extend({
  attributeBindings: ['draggable']
  draggable: true,
  setEventData: function(event) {
    event.dataTransfer.setData('text/x-drag', this.get('elementId'));
  }.on('dragStart')
});