New Twiddle

components.draggable-dropzone.js

import Ember from 'ember';

var { set } = Ember;

export default Ember.Component.extend({
  
  init() {
    this._super(...arguments);
    console.log("in component");
  },
  dragLeave(event) {
    event.preventDefault();
    set(this, 'dragClass', 'deactivated');
  },

  dragOver(event) {
    event.preventDefault();
    set(this, 'dragClass', 'activated');
  },

  drop(event) {
    var data = event.dataTransfer.getData('text/data');
    this.sendAction('dropped', data);
    
    set(this, 'dragClass', 'deactivated');    
  }
});

components.draggable-item.js

import Ember from 'ember';

var { get } = Ember;

export default Ember.Component.extend({
  classNames        : [ 'draggableItem' ],
  attributeBindings : [ 'draggable' ],
  draggable         : 'true',
  
  dragStart(event) {
    return event.dataTransfer.setData('text/data', get(this, 'content'));
  }
});

controllers.application.js

import Ember from 'ember';
var { computed, get } = Ember;

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  selectedUsers        : Ember.A([]),
  remainingUsers       : computed.setDiff('model', 'selectedUsers'),
  remainingUsersLength : computed.alias('remainingUsers.length'),

  actions: {
    addUser(userId) {
      var selectedUsers = get(this, 'selectedUsers');
      var user          = get(this, 'model').findBy('id', parseInt(userId));

      if (!selectedUsers.contains(user)) {
        return selectedUsers.pushObject(user);
      }
    },

    addAllUsers() {
      var remainingUsers = get(this, 'remainingUsers')
      return get(this, 'selectedUsers').pushObjects(remainingUsers);
    },

    removeUser(user) {
      return get(this, 'selectedUsers').removeObject(user);
    },

    removeAllUsers() {
      return get(this, 'selectedUsers').clear();
    }
  }
});

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
  
.draggableDropzone {
   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;
   }
}
}

styles.draggable.scss

$default-margin : 20px;
$gray-light     : #e1e1e1;
$gray-medium    : #aaa;
$green          : #2ecc71;
$white          : #fff;
$black          : #111;

.draggableDropzone {
   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;
   }
}

.draggableItem[draggable=true] {
   display: inline-block;
   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;
   }
}

templates.application.hbs

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

<div class="selected-users draggableDropzone">
  {{#draggable-dropzone dropped="addUser"}}
    <ul class="selected-users-list">
      {{#each user in selectedUsers}}
        <li>{{user.fullName}}</li>
      {{/each}} 
    </ul>
  {{/draggable-dropzone}}
</div>

<div class="available-users">
  {{#each user in users}}
    {{#draggable-item content=user.id}}
      <span>{{user.fullName}}</span>
    {{/draggable-item}}
  {{/each}}
</div>

templates.components.draggable-dropzone.hbs

{{yield}}

templates.components.draggable-item.hbs

{{yield}}

twiddle.json

{
  "version": "0.15.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "3.4.3",
    "ember-template-compiler": "3.4.3",
    "ember-testing": "3.4.3"
  },
  "addons": {
    "ember-data": "3.4.2"
  }
}