add drag and drop modifier

app/components/commander/index.hbs

@@ -39,14 +39,19 @@
     @extradoc={{@extradoc}}
     @hint={{@hint}} />
 
-  <div class="view-mode-{{this.view_mode}}">
+  <Commander::Panel
+    class="view-mode-{{this.view_mode}}"
+    {{droppable onDrop=this.onDrop onDragOver=this.onDragOver }}>
+
     {{#each this.children as |node|}}
       {{#let (component node.nodeType) as |NodeType|}}
         {{! NodeType is either <Folder /> or <Document />}}
         <NodeType
           @model={{node}}
           @selectedNodes={{this.selected_nodes}}
-          @onCheckboxChange={{this.onCheckboxChange}} >
+          @onCheckboxChange={{this.onCheckboxChange}}
+          @onDragendSuccess={{this.onDragendSuccess}}
+          @onDragendCancel={{this.onDragendCancel}}>
             <DualLinkTo
               @node={{node}}
               @extranode={{@extranode}}
@@ -55,7 +60,8 @@
         </NodeType>
       {{/let}}
     {{/each}}
-  </div>
+
+  </Commander::Panel>
 
   {{#if @pagination }}
     <Pagination

app/components/commander/index.js

@@ -142,6 +142,24 @@ export default class CommanderComponent extends Component {
     }
   }
 
+  @action
+  onDrop(node_model) {
+    console.log(`onDrop: ${node_model}`);
+    console.log(`model type = ${node_model.nodeType}`);
+    console.log(`model id = ${node_model.id}`);
+  }
+
+  @action
+  onDragendCancel(node_model) {
+    console.log(`onDragendCancel: ${node_model}`);
+  }
+
+  @action
+  onDragendSuccess(node_model) {
+    console.log(`onDragendSuccess: ${node_model}`);
+  }
+
+
   get children() {
     /**
       Update children nodes (e.g. with newly added records) for better UX

app/components/commander/panel.hbs

+<div class="panel" ...attributes>
+  {{yield}}
+</div>
\ No newline at end of file

app/components/document/index.hbs

-<div class="node document {{if this.is_selected "checked"}}">
+<div class="node document {{if this.is_selected "checked"}}"
+  {{draggable @model
+    onDragendSuccess=@onDragendSuccess
+    onDragendCancel=@onDragendCancel}}>
   <Input
     @type="checkbox"
     @checked={{this.is_selected}}

app/components/folder/index.hbs

-<div class="node folder {{if this.is_selected "checked"}}">
+<div class="node folder
+  {{if this.is_selected "checked"}}"
+  {{draggable @model onDragendSuccess=@onDragendSuccess onDragendCancel=@onDragendCancel}}>
   <Input
     @type="checkbox"
     @checked={{this.is_selected}}

app/modifiers/draggable.js

+import { action } from '@ember/object';
+import Modifier from 'ember-modifier';
+
+
+export default class DraggableModifier extends Modifier {
+  /* Usage:
+
+    {{draggable @model
+      onDragendSuccess=@onDragendSuccess
+      onDragendCancel=@onDragendCancel}}
+  */
+
+  model = null;
+
+  addEventListener() {
+    this.element.addEventListener('dragstart', this.onDragStart);
+    this.element.addEventListener('dragend', this.onDragEnd);
+  }
+
+  removeEventListener() {
+    this.element.removeEventListener('dragstart', this.onDragStart);
+    this.element.removeEventListener('dragend', this.onDragEnd);
+  }
+
+  // lifecycle hooks
+  didReceiveArguments() {
+    this.removeEventListener();
+    this.addEventListener();
+    this.element.setAttribute('draggable', true);
+  }
+
+  willDestroy() {
+    this.removeEventListener();
+  }
+
+  @action
+  onDragStart(event) {
+    this.model = this.args.positional[0];
+    event.dataTransfer.setData("application/x.node", this.model);
+  }
+
+  @action
+  onDragEnd(event) {
+    const ondragend_success = this.args.named['onDragendSuccess'];
+    const ondragend_cancel = this.args.named['onDragendCancel'];
+
+    if (!event.dropEffect) {
+      ondragend_cancel(this.model);
+    } else {
+      ondragend_success(this.model);
+    }
+  }
+}

app/modifiers/droppable.js

+import { action } from '@ember/object';
+import Modifier from 'ember-modifier';
+
+
+export default class DrappableModifier extends Modifier {
+
+  addEventListener() {
+    this.element.addEventListener('drop', this.onDrop);
+    this.element.addEventListener('dragover', this.onDragOver);
+  }
+
+  removeEventListener() {
+    this.element.removeEventListener('drop', this.onDrop);
+    this.element.removeEventListener('dragover', this.onDragOver);
+  }
+
+  // lifecycle hooks
+  didReceiveArguments() {
+    this.removeEventListener();
+    this.addEventListener();
+  }
+
+  willDestroy() {
+    this.removeEventListener();
+  }
+
+  @action
+  onDrop(event) {
+    let data;
+    const isNode = event.dataTransfer.types.includes("application/x.node");
+    const callback = this.args.named['onDrop'];
+
+    event.preventDefault();
+
+    if (isNode && callback) {
+      data = event.dataTransfer.getData('application/x.node');
+      callback(data);
+    }
+  }
+
+  @action
+  onDragOver(event) {
+    const isNode = event.dataTransfer.types.includes("application/x.node");
+
+    event.preventDefault();
+
+    if (isNode) {
+      //console.log(`dragging over a node`);
+    }
+  }
+}

app/modifiers/show-when.js

 import { Modal } from 'bootstrap';
 import { modifier } from 'ember-modifier';
 
+
 export default modifier((element, [isDisplayed]) => {
   let modal;