Ember Drag Drop

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  activate() {
    document.body.classList.add('standard');
  }
});

application.template.hbs

<header class="container-fluid">
  <h1>Ember Sandbox</h1>
</header>

<hr>

<main class="container-fluid">
	{{outlet}}
</main>

dnd-simple.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    process(content, options) {
      console.log(content, options);
    },
    
    dragStart(content, event) {
      console.log('start: ', content);
    },
    
    dragMove(event) {
      // console.log('moving: ', event);
    },
    
    dragOver(event) {
      console.log('over: ', event);
    },
    
    dragOut() {
      console.log('out...');
    },
    
    dragEnd(content, event) {
      console.log('end: ', content);
    },
    
    sortEnd(event) {
      console.log('sort end: ', event);
    }
  }
});

dnd-simple.template.hbs

{{#ui-droppable
	action="process"
  dragOverAction="dragOver"
  dragOutAction="dragOut"
  }}
  <strong>拖拽目标区域</strong>
{{/ui-droppable}}

<h3>简单拖拽</h3>

{{#ui-draggable
	content=(readonly person)
  draggable=true
	dragStartAction="dragStart"
  dragMoveAction="dragMove"
  dragEndAction="dragEnd"}}
  <strong>{{person.name}} {{person.gender}}</strong>
{{/ui-draggable}}

<h3>手柄拖拽</h3>

{{#ui-draggable
	content=(readonly person)
	dragHandle=".drag-handle"
  dragStartAction="dragStart"
  dragMoveAction="dragMove"
  dragEndAction="dragEnd"}}
	<span class="drag-handle"></span>
  <strong>{{person.name}} {{person.gender}}</strong>
{{/ui-draggable}}

<h3>排序拖拽</h3>

{{#ui-sortable sortableObjectList=people sortEndAction="sortEnd" sortingScope="p1"}}
  {{#each people as |person|}}
  	{{#ui-draggable
      content=(readonly person)
      sortable=true
      sortingScope="p1"
      dragHandle=".drag-handle"
      dragStartAction="dragStart"
      dragMoveAction="dragMove"
      dragEndAction="dragEnd" as |sortable|}}
      {{#if sortable}}<span class="drag-handle"></span>{{/if}}
      <strong>{{person.id}} - {{person.name}} {{person.gender}}</strong>
    {{/ui-draggable}}
  {{/each}}
{{/ui-sortable}}

<hr>

{{#ui-sortable sortableObjectList=people sortEndAction="sortEnd" sortingScope="p2"}}
  {{#each people as |person|}}
  	{{#ui-draggable
      content=(readonly person)
      sortable=true
      sortingScope="p2"
      dragHandle=".drag-handle"
      dragStartAction="dragStart"
      dragMoveAction="dragMove"
      dragEndAction="dragEnd" as |sortable|}}
      {{#if sortable}}<span class="drag-handle"></span>{{/if}}
      <strong>{{person.id}} - {{person.name}} {{person.gender}}</strong>
    {{/ui-draggable}}
  {{/each}}
{{/ui-sortable}}

{{yield}}

index.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return {
      person: {
        name: 'Albert Yu',
        gender: '㊚'
      },
      people: [
        { id: 1, name: 'Albert Yu', gender: '㊚' },
        { id: 2, name: 'Wester Xi', gender: '㊚' },
        { id: 3, name: 'Richie Castle', gender: '㊚' },
        { id: 4, name: 'Kate Becket', gender: '㊛' },
        { id: 5, name: 'Alexis Castle', gender: '㊛' }
      ]
    }
  }
});

index.template.hbs

{{dnd-simple person=model.person people=model.people}}

styles.app.css

*, *::before, &::after {
  box-sizing: border-box;
}

.ui-draggable,
.ui-droppable {
  display: flex;
  position: relative;
  margin-bottom: 1rem;
  transition: all .5s;
}

.ui-draggable {
  background-color: #1894f2;
}

.ui-draggable.draggable,
.ui-draggable .drag-handle {
  cursor: move;
  cursor: grab;
  cursor: -moz-grab;
  cursor: -webkit-grab;  
}

.ui-draggable.draggable:active,
.ui-draggable .drag-handle:active {
  cursor: grabbing;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}

.ui-draggable .drag-handle {
 	position: absolute;
  left: 1rem;
  height: 24px;
  width: 24px;
  border-radius: 2px;
  background-color: white;
}

.ui-draggable.dragging {
  box-shadow: 0 0 3px 0 rgba(0, 0, 0, .5);
  transform: scale(1.01);
}

.ui-droppable {
  opacity: .5;
  background-color: #bdc3c7;
}

.ui-droppable.dropped {
  opacity: 1;
  background-color: #f1c40f;
}

.ui-draggable,
.ui-droppable {
  justify-content: center;
  padding: 4rem 1rem;
  border-radius: 2px;
  color: white;
}

.ui-sortable {
  background-color: white;
  transition: all .2s;
}

.ui-sortable.sorting {
  transform: scale(1.01);
  background-color: rgba(0, 0, 0, .1);
}

.ui-sortable > .ui-draggable {
  justify-content: normal;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.ui-sortable strong {
  margin-left: 2.5rem;
}

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js",
    "hack": "//cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/hack.css",
    "standard": "//cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/standard.css",
    "ember": "2.6.2",
    "ember-data": "2.6.2",
    "ember-template-compiler": "2.6.2",
    "ember-testing": "2.6.2"
  },
  "addons": {
    "ember-drag-drop": "0.4.0"
  }
}

ui-draggable.component.js

import Ember from 'ember';
import Component from 'ember-drag-drop/components/draggable-object';

const {
  computed,
  get
} = Ember;

export default Component.extend({
  sortable: computed.alias('isSortable'),
  draggable: computed.alias('dragReady'),
  overrideClass: 'ui-draggable',
  classNameBindings: ['isDraggingObject:dragging', 'dragReady:draggable'],
  
  init() {
    // remove inherited classname bindings
    get(this, 'classNameBindings')
    	.removeObjects([':js-draggableObject',
                      'isDraggingObject:is-dragging-object:']);

    this._super(...arguments);
  }
});

ui-draggable.template.hbs

{{yield sortable}}

ui-droppable.component.js

import Ember from 'ember';
import Component from 'ember-drag-drop/components/draggable-object-target';

const {
  get,
  computed,
} = Ember;

export default Component.extend({
  dropped: computed.alias('accepts-drag'),
  self: computed.alias('self-drop'),
  overrideClass: 'ui-droppable',
  classNameBindings: ['dropped', 'self'],
  
  init() {
    get(this, 'classNameBindings')
    	.removeObjects(['accepts-drag', 'self-drop']);
    
    this._super(...arguments);
  }
});

ui-droppable.template.hbs

{{yield}}

ui-sortable.component.js

import Ember from 'ember';
import Component from 'ember-drag-drop/components/sortable-objects';

const {
  set
} = Ember;

export default Component.extend({
  overrideClass: 'ui-sortable',
  classNameBindings: ['sorting'],
  
  dragStart() {
    set(this, 'sorting', true);
    this._super(...arguments);
  },
  
  drop() {
    set(this, 'sorting', false);
    this._super(...arguments);
	}
});

ui-sortable.template.hbs

{{yield}}