Drag and Drop Components

components.draggable-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  draggable: true,
  attributeBindings: ['draggable'],
  classNames: ['p-4 border'],
  
  dragEnd() {
    alert("the drag ended")
  },
});

components.drop-zone.js

import Ember from 'ember';

export default Ember.Component.extend({
  droppable: true,
  attributeBindings: ['droppable'],
  classNames: ['p-4 border'],
  
  dragEnter(e) {
    alert("dragEnter")
    e.preventDefault()
    e.stopPropagation()
  },
  
  dragOver(e) {
    alert("dragOver")
    e.preventDefault()
    e.stopPropagation()
  },
  
  drop(e) {
    alert("drop")
    e.preventDefault()
    e.stopPropagation()
  },
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle'
});

styles.app.css

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

.border {
  border: 1px solid grey;
}

.p-4 {
  padding: 1rem;
}

templates.application.hbs

<DraggableItem>
 [ drag me, drop me ]
</DraggableItem>

<DropZone>
  [ lay it on me ]
</DropZone>

templates.components.draggable-item.hbs

{{yield}}

templates.components.drop-zone.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"
  }
}