Enter Dragula

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  init: () => console.clear()
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
	beforeModel() {
    this.transitionTo('example-one');
  }
});

application.template.hbs

<div class="nav">
  {{#link-to "example-one"}}1. Single Container{{/link-to}}
  {{#link-to "example-two"}}2. Two Containers{{/link-to}}
  {{#link-to "example-three"}}3. Two Drakes, Many Containers{{/link-to}}
</div>

{{outlet}}

example-one.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    dropReport: (el, target, source, sibling) => {
      console.log("Dragged:", el);
      console.log("Target container:", target);
      console.log("Source container:", source);
      console.log("Sibling:", sibling);
    }
  }
});

example-one.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: () => [
    {
      name: "Eludoid Epv",
      avatar: "https://robohash.org/EludoidEpv.png?size=75x75"
    },
    {
      name: "Amol Uyzator", 
      avatar: "https://robohash.org/AmolUyzator.png?size=75x75"
    },
    {
      name: "Uhx Iforoid", 
      avatar: "https://robohash.org/UhxIforoid.png?size=75x75"
    },
    {
      name: "Egator Azok", 
      avatar: "https://robohash.org/EgatorAzok.png?size=75x75"
    },
    {
      name: "Oted Axun", 
      avatar: "https://robohash.org/OtedAxun.png?size=75x75"
    }
  ]
});

example-one.template.hbs

{{#simple-drag-and-drop dropped="dropReport" containerSelector=".container"}}
  <div class="container forty-percent" title="Container 1">
  	{{#each model as |item|}}
      <div class="item">
        <img src="{{item.avatar}}"/>
	      <p>{{item.name}}</p>
			</div>
		{{/each}}
  </div>
{{/simple-drag-and-drop}}

example-three.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    dropReport: (el, target, source, sibling) => {
      console.log("Dragged:", el);
      console.log("Target container:", target);
      console.log("Source container:", source);
      console.log("Sibling:", sibling);
    }
  }
});

example-three.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: () => ({
    one: [
      {
        name: "Eludoid Epv",
        avatar: "https://robohash.org/EludoidEpv.png?size=75x75"
      },
      {
        name: "Amol Uyzator", 
        avatar: "https://robohash.org/AmolUyzator.png?size=75x75"
      }
    ],
    two: [
      {
        name: "Uhx Iforoid", 
        avatar: "https://robohash.org/UhxIforoid.png?size=75x75"
      }
    ],
    three: [
      {
        name: "Egator Azok", 
        avatar: "https://robohash.org/EgatorAzok.png?size=75x75"
      },
      {
        name: "Oted Axun", 
        avatar: "https://robohash.org/OtedAxun.png?size=75x75"
      }
    ]
  })
});

example-three.template.hbs

<div class="container-group forty-percent" title="Drake 1">
  {{#simple-drag-and-drop dropped="dropReport" containerSelector=".container"}}
    <div class="container" title="Container 1">
      {{#each model.one as |item|}}
        <div class="item">
          <img src="{{item.avatar}}"/>
          <p>{{item.name}}</p>
        </div>
      {{/each}}
    </div>

    <div class="container" title="Container 2">
      {{#each model.two as |item|}}
        <div class="item">
          <img src="{{item.avatar}}"/>
          <p>{{item.name}}</p>
        </div>
      {{/each}}
    </div>
  {{/simple-drag-and-drop}}
</div>

<div class="container-group forty-percent" title="Drake 2">
	{{#simple-drag-and-drop dropped="dropReport" containerSelector=".container"}}
  	<div class="container" title="Container 1">
  		{{#each model.one as |item|}}
        <div class="item">
          <img src="{{item.avatar}}"/>
          <p>{{item.name}}</p>
        </div>
	    {{/each}}
  	</div>

    <div class="container" title="Container 2">
      {{#each model.two as |item|}}
        <div class="item">
          <img src="{{item.avatar}}"/>
          <p>{{item.name}}</p>
        </div>
      {{/each}}
    </div>
  
    <div class="container" title="Container 3">
      {{#each model.three as |item|}}
        <div class="item">
          <img src="{{item.avatar}}"/>
          <p>{{item.name}}</p>
        </div>
      {{/each}}
    </div>
  {{/simple-drag-and-drop}}
</div>

example-two.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    dropReport: (el, target, source, sibling) => {
      console.log("Dragged:", el);
      console.log("Target container:", target);
      console.log("Source container:", source);
      console.log("Sibling:", sibling);
    }
  }
});

example-two.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model: () => ({
    one: [
      {
        name: "Eludoid Epv",
        avatar: "https://robohash.org/EludoidEpv.png?size=75x75"
      },
      {
        name: "Amol Uyzator", 
        avatar: "https://robohash.org/AmolUyzator.png?size=75x75"
      },
      {
        name: "Uhx Iforoid", 
        avatar: "https://robohash.org/UhxIforoid.png?size=75x75"
      }
    ],
    two: [
      {
        name: "Egator Azok", 
        avatar: "https://robohash.org/EgatorAzok.png?size=75x75"
      },
      {
        name: "Oted Axun", 
        avatar: "https://robohash.org/OtedAxun.png?size=75x75"
      }
    ]
  })
});

example-two.template.hbs

{{#simple-drag-and-drop dropped="dropReport" containerSelector=".container"}}
  <div class="container forty-percent" title="Container 1">
  	{{#each model.one as |item|}}
      <div class="item">
        <img src="{{item.avatar}}"/>
	      <p>{{item.name}}</p>
			</div>
    {{/each}}
  </div>

  <div class="container forty-percent" title="Container 2">
  	{{#each model.two as |item|}}
      <div class="item">
        <img src="{{item.avatar}}"/>
	      <p>{{item.name}}</p>
			</div>
    {{/each}}
  </div>
{{/simple-drag-and-drop}}

router.js

import Ember from 'ember';
import config from './config/environment';

var Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route("example-one");
  this.route("example-two");
  this.route("example-three");
});

export default Router;

simple-drag-and-drop.component.js

import Ember from 'ember';

// {{#simple-drag-and-drop dropped="action" containerSelector="css-selector" options=object}}
//   Containers are found in this body using containerSelector.
//   By default children of containers can be dragged onto all containers, but
//     this can be adjusted via options.
//   When a child element is dropped, "action" is called up the ancestor chain
//     with arguments el, target, source,sibling:
//       el -> the element dragged
//       target -> the container dropped onto
//       source -> the container dragged from
//       sibling -> the element after the dropped element
// {{/static-drag-and-drop}}
export default Ember.Component.extend({
  willInsertElement: function() {
    let drake = window.dragula(this.dragulaContainers(), this.dragulaOptions());
    drake.on("drop", (el, target, source, sibling) => {
      this.sendAction("dropped", el, target, source, sibling);
    });
    this.set("drake", drake);
    console.log("New drake created, container count:", drake.containers.length);
  },
  willDestroyElement: function() {
    this.get("drake").destroy();
    this.set("drake", null);
    console.log("Existing drake removed");
  },
  dragulaContainers: function() {
    if (this.containerSelector === undefined) {
      return [];
    } else {
      return this.$(this.containerSelector).get();
    }
  },
  dragulaOptions: function() {
    return this.options || {};
  }
});

simple-drag-and-drop.template.hbs

{{yield}}

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.nav {
  margin: 24px;
  text-align: center;
}

.nav a {
  color: white;
  background-color: lightgray;
  text-decoration: none;
  padding: 8px;
}

.nav a.active, .nav a:hover {
  background-color: gray;
}

.forty-percent {
  width: 40%;
}

.container-group {
  vertical-align: top;
  border: solid #AAA 2px;
  padding: 0 8px;
  margin: 8px;
  display: inline-block;
}

.container {
  border: solid lightgray 2px;
  padding: 0 16px;
  margin: 16px 8px;
  min-height: 16px;
}

.item {
  color: gray;
  text-align: center;
  background-color: #EFEFEF;
  border: solid lightgray 1px;
  margin: 16px 0;
}

twiddle.json

{
  "version": "0.4.11",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.13/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.10/ember-template-compiler.js",
    "dragula": "https://cdnjs.cloudflare.com/ajax/libs/dragula/3.5.1/dragula.min.js",
    "dragula-css": "https://cdnjs.cloudflare.com/ajax/libs/dragula/3.5.1/dragula.min.css"
  }
}