poteto

import Ember from 'ember';

var { set } = Ember;

export default Ember.Component.extend({
  classNames        : [ 'draggableDropzone' ],
  classNameBindings : [ 'dragClass' ],
  dragClass         : 'deactivated',

  dragLeave(event) {

poteto

import Ember from 'ember';

var { get } = Ember;

export default Ember.Component.extend({
  classNames        : [ 'draggableItem' ],
  attributeBindings : [ 'draggable' ],
  draggable         : 'true',
  
  dragStart(event) {

poteto

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

poteto

drop(event) {
  // ...
  this.sendAction('dropped', data);
}

poteto

import Ember from 'ember';

var { computed, get } = Ember;

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

  actions: {

poteto

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

.draggableDropzone {
   display: block;
   border: 3px dashed $gray-medium;

poteto

import Ember from 'ember';
import { sample: computedSample } from '../macros/computed/sample';

var { computed } = Ember;

export default Ember.Component.extend({
  tagName              : 'h1',
  classNames           : [ 'loading', 'animated', 'fadeIn' ],
  showLoadingMessages  : false,
  randomLoadingMessage : computedSample('loadingMessages'),

poteto

import Ember from 'ember';

var { computed, getWithDefault } = Ember;

export default function(dependentKey) {
  return (
    computed(`${dependentKey}.@each`, function() {
      var emptyArray = Ember.A([]);
      var items      = getWithDefault(this, dependentKey, emptyArray);
      var length     = items.get('length');

poteto

i.ellipsis i {
  font-style: normal;
  opacity: 0;
  -webkit-animation: dot 1.3s infinite;
  -webkit-animation-delay: 0s;
  -moz-animation: dot 1.3s infinite;
  -moz-animation-delay: 0s;
  -o-animation: dot 1.3s infinite;
  -o-animation-delay: 0s;
  animation: dot 1.3s infinite;

poteto

{{loadingText}}
<i class="ellipsis">
  <i>.</i>
  <i>.</i>
  <i>.</i>
</i>

{{#if showLoadingMessages}}
  <small>{{randomLoadingMessage}}</small>
{{/if}}