Drag and Drop for files and folders

app/components/commander/index.hbs

-<div class="panel commander col m-2 p-2">
+<div class="panel commander col m-2 p-2"
+  {{droppable
+    onDrop=this.onDrop
+    onDragOver=this.onDragOver }}>
   <div class="d-flex justify-content-between">
     <Commander::ActionButtons
       @openNewFolderModal={{this.openNewFolderModal}}
@@ -39,9 +42,7 @@
     @extradoc={{@extradoc}}
     @hint={{@hint}} />
 
-  <Commander::Panel
-    class="view-mode-{{this.view_mode}}"
-    {{droppable onDrop=this.onDrop onDragOver=this.onDragOver }}>
+  <div class="view-mode-{{this.view_mode}}">
 
     {{#each this.children as |node|}}
       {{#let (component node.nodeType) as |NodeType|}}
@@ -61,7 +62,7 @@
       {{/let}}
     {{/each}}
 
-  </Commander::Panel>
+  </div>
 
   {{#if @pagination }}
     <Pagination

app/components/commander/index.js

@@ -143,20 +143,50 @@ 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}`);
+  onDrop(json_node_model) {
+    /**
+      Action invoked when a node (folder/document) was
+      successfully dropped from one panel into another.
+
+      `json_node_model` is dictionary with following keys:
+        - id
+        - model_name
+    */
+    let found_obj;
+
+    found_obj = this.store.peekRecord(
+      json_node_model.model_name,
+      json_node_model.id
+    );
+
+    if (found_obj) {
+      console.log(`onDrop on ${this.args.hint}: ${found_obj}`);
+      console.log(`model type = ${found_obj.nodeType}`);
+      console.log(`model id = ${found_obj.id}`);
+    }
   }
 
   @action
-  onDragendCancel(node_model) {
-    console.log(`onDragendCancel: ${node_model}`);
+  onDragendCancel(model) {
+    /**
+      Action invoked when drag operation for a node (folder/document)
+      was canceled. It is invoked on the SOURCE panel.
+
+      `model` is instance of `model.document` or `model.folder`
+    */
+    console.log(`onDragendCancel on ${this.args.hint}: id=${model.id} type=${model.nodeType}`);
+
   }
 
   @action
-  onDragendSuccess(node_model) {
-    console.log(`onDragendSuccess: ${node_model}`);
+  onDragendSuccess(model) {
+    /**
+      Action invoked when drag operation for a node (folder/document)
+      succeeded. It is invoked on the SOURCE panel.
+
+      `model` is instance of `model.document` or `model.folder`
+    */
+    console.log(`onDragendSuccess on ${this.args.hint}: id=${model.id} type=${model.nodeType}`);
   }
 
 

app/components/commander/panel.hbs

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

app/modifiers/draggable.js

@@ -3,23 +3,46 @@ import Modifier from 'ember-modifier';
 
 
 export default class DraggableModifier extends Modifier {
-  /* Usage:
+  /*
+    Modifier which will make element draggable.
+
+    It performs following:
+
+      1. Sets draggable attribute of the element to 'true'
+      2. Listents to dragstart and dragend events
+
+    Usage:
 
     {{draggable @model
       onDragendSuccess=@onDragendSuccess
       onDragendCancel=@onDragendCancel}}
+
+    Notice that you need to pass as first argument either
+    `models.document` or `models.folder` instance.
   */
 
   model = null;
 
   addEventListener() {
-    this.element.addEventListener('dragstart', this.onDragStart);
-    this.element.addEventListener('dragend', this.onDragEnd);
+    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);
+    this.element.removeEventListener(
+      'dragstart',
+      this.onDragStart
+    );
+    this.element.removeEventListener(
+      'dragend',
+      this.onDragEnd
+    );
   }
 
   // lifecycle hooks
@@ -35,8 +58,19 @@ export default class DraggableModifier extends Modifier {
 
   @action
   onDragStart(event) {
+    let data;
+
     this.model = this.args.positional[0];
-    event.dataTransfer.setData("application/x.node", this.model);
+
+    data = {
+      id: this.model.id,
+      model_name: this.model._internalModel.modelName
+    }
+
+    event.dataTransfer.setData(
+      "application/x.node",
+      JSON.stringify(data)
+    );
   }
 
   @action
@@ -44,10 +78,10 @@ export default class DraggableModifier extends Modifier {
     const ondragend_success = this.args.named['onDragendSuccess'];
     const ondragend_cancel = this.args.named['onDragendCancel'];
 
-    if (!event.dropEffect) {
-      ondragend_cancel(this.model);
-    } else {
+    if (event.dataTransfer.dropEffect === "move") {
       ondragend_success(this.model);
+    } else {
+      ondragend_cancel(this.model);
     }
   }
 }

app/modifiers/droppable.js

@@ -7,11 +7,15 @@ export default class DrappableModifier extends Modifier {
   addEventListener() {
     this.element.addEventListener('drop', this.onDrop);
     this.element.addEventListener('dragover', this.onDragOver);
+    this.element.addEventListener('dragenter', this.onDragEnter);
+    this.element.addEventListener('dragleave', this.onDragLeave);
   }
 
   removeEventListener() {
     this.element.removeEventListener('drop', this.onDrop);
     this.element.removeEventListener('dragover', this.onDragOver);
+    this.element.removeEventListener('dragenter', this.onDragEnter);
+    this.element.removeEventListener('dragleave', this.onDragLeave);
   }
 
   // lifecycle hooks
@@ -31,10 +35,10 @@ export default class DrappableModifier extends Modifier {
     const callback = this.args.named['onDrop'];
 
     event.preventDefault();
-
+    this.element.classList.remove('droparea');
     if (isNode && callback) {
       data = event.dataTransfer.getData('application/x.node');
-      callback(data);
+      callback(JSON.parse(data));
     }
   }
 
@@ -43,9 +47,20 @@ export default class DrappableModifier extends Modifier {
     const isNode = event.dataTransfer.types.includes("application/x.node");
 
     event.preventDefault();
-
     if (isNode) {
       //console.log(`dragging over a node`);
     }
   }
+
+  @action
+  onDragEnter(event) {
+    event.preventDefault();
+    this.element.classList.add('droparea');
+  }
+
+  @action
+  onDragLeave(event) {
+    event.preventDefault();
+    this.element.classList.remove('droparea');
+  }
 }

app/styles/app.scss

@@ -56,3 +56,7 @@ main {
 .viewer {
   background-color: white;
 }
+
+.droparea {
+  outline: 1px solid green;
+}