New Twiddle

components.draggable-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['draggable-component'],
  attributeBindings: ['draggable', ],
  draggable: "true",
  dragStart: function(event) {
    let item = this.get('content');
    return event.dataTransfer.setData('text/data', item.id);
  },
});

components.draggable-dropzone.js

import Ember from 'ember';

export default Ember.Component.extend({
  classNames: ['draggable-dropzone'],
  classNameBindings: ['dragClass'],
  dragClass: 'deactivated',
  dragLeave: function(event) {
    event.preventDefault();
    return this.set('dragClass', 'deactivated');
  },
  dragOver: function(event) {
    event.preventDefault();
    return this.set('dragClass', 'activated');
  },
  drop: function(event) {
    let data = event.dataTransfer.getData('text/data');;
    let dropZoneData = this.get('current-content').id;
    this.set('dragClass', 'deactivated');
    return this.sendAction('dropped', data, dropZoneData);
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

routes.index.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return [
      {
        id: 1,
        firstName: 'Trek',
        lastName: 'Glowacki'
      }, {
        id: 2,
        firstName: 'Tom',
        lastName: 'Dale'
      }, {
        id: 3,
        firstName: 'Yehuda',
        lastName: 'Katz'
      }
    ];
  },
  actions: {
   	changeTimes(droppedId, dropZoneId){
      let droppedUser = this.model().findBy('id', parseInt(droppedId));
      let dropZoneUser = this.model().findBy('id', dropZoneId);
      //console.log(droppedUser);
    } 
  }
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<style>

.draggable-dropzone {
   display: block;
   border: 3px dashed $gray-medium;
   padding: $default-margin / 2;
   width: 100%;
   min-height: $default-margin * 2.5;
   color: $gray-medium;
   margin-bottom: $default-margin / 2;
   &.activated {
     border-color: $green;
   }
   &.deactivated {
     border-color: $gray-light;
   }
}

.draggable-component[draggable=true] {
   
   min-width: $default-margin;
   min-height: $default-margin;
   background: $gray-light;
   padding: $default-margin / 4 $default-margin / 2;
   margin: $default-margin / 4;
   -moz-user-select: none;
   -khtml-user-drag: element;
   cursor: move;
   &:hover {
     background-color: $gray-medium;
   }
}
</style>

templates.index.hbs

<h1>Index</h1>
{{#each model as |item|}}
	<div>
  {{#draggable-component content=item dropped="changeTimes"}}
  	{{#draggable-dropzone current-content=item dropped="changeTimes"}}
    	{{item.firstName}} {{item.lastName}}
  	{{/draggable-dropzone}}
  {{/draggable-component}}
  </div> 
{{/each}}

twiddle.json

{
  "version": "0.13.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}