ember-dragula

controllers.application\.js

import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {

  @tracked
  listOne = [{ name: 'Item 1' }, { name: 'Item 2' }, { name: 'Item 3' }];

  @tracked
  listTwo = [{ name: 'Item 4' }, { name: 'Item 5' }, { name: 'Item 6' }];
  
  @action
  pushToFirstList() {
    console.log('pushed');
    
    this.listOne.push({ name: 'NEW' });
    this.listOne = this.listOne;
  }
}

styles.app\.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
  background: #fff;
  color: #000;
}
.list {
  margin-right: 10px;
}

.item {
  margin: 5px auto;
}

.ember-dragula {
  display: flex;
}

.item.restyle.gu-mirror {
  transform: rotate(7deg);
}

templates.application\.hbs

<EmberDragula as |d|>
  <d.Container class="list list-copy-1">
    {{#each this.listOne as |item|}}
      <div class="item">
        {{item.name}}
      </div>
    {{/each}}
  </d.Container>

  <d.Container class="list list-copy-2">
    {{#each this.listTwo as |item|}}
      <div class="item">
        {{item.name}}
      </div>
    {{/each}}
  </d.Container>
</EmberDragula>

<button type='button' {{on 'click' this.pushToFirstList}}> Push a new item to first list</button>




{{outlet}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0",
    "@zestia/ember-dragula": "10.0.4"
  }
}