From 63b5e0a3b7f7c3ead779dbf6f269a22d21230bdc Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sat, 1 Jun 2019 16:09:13 +0200
Subject: [PATCH] Make the dragger react on drag events

---
 src/commands/view/ComponentDrag.js |  3 +++
 src/utils/Dragger.js               |  4 ++--
 src/utils/Droppable.js             | 29 +++++++++++++++++++----------
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/src/commands/view/ComponentDrag.js b/src/commands/view/ComponentDrag.js
index d58ddca70..fe6d4897c 100644
--- a/src/commands/view/ComponentDrag.js
+++ b/src/commands/view/ComponentDrag.js
@@ -299,6 +299,7 @@ module.exports = {
   },
 
   onStart() {
+    console.log('ComponentDrag onStart');
     const { target, editor, isTran } = this;
     const style = target.getStyle();
     const position = 'absolute';
@@ -317,6 +318,7 @@ module.exports = {
   },
 
   onDrag() {
+    console.log('ComponentDrag onDrag');
     const { guidesTarget, opts } = this;
     this.updateGuides(guidesTarget);
     opts.debug && guidesTarget.forEach(item => this.renderGuide(item));
@@ -330,6 +332,7 @@ module.exports = {
     onEnd && onEnd();
     editor.stopCommand(id);
     this.hideGuidesInfo();
+    console.log('ComponentDrag onEnd');
   },
 
   hideGuidesInfo() {
diff --git a/src/utils/Dragger.js b/src/utils/Dragger.js
index 05947cea7..e3b214202 100644
--- a/src/utils/Dragger.js
+++ b/src/utils/Dragger.js
@@ -78,8 +78,8 @@ export default class Dragger {
     const docs = this.getDocumentEl();
     const method = enable ? 'on' : 'off';
     const methods = { on, off };
-    methods[method](docs, 'mousemove', this.drag);
-    methods[method](docs, 'mouseup', this.stop);
+    methods[method](docs, 'mousemove dragover', this.drag);
+    methods[method](docs, 'mouseup dragend touchend', this.stop);
   }
 
   /**
diff --git a/src/utils/Droppable.js b/src/utils/Droppable.js
index 4f690719b..93502e734 100644
--- a/src/utils/Droppable.js
+++ b/src/utils/Droppable.js
@@ -34,9 +34,13 @@ export default class Droppable {
     this.counter = 0;
     this.over = 0;
     // force out like in BlockView
-    const sorter = this.sorter;
-    cancel && (sorter.moved = 0);
-    sorter.endMove();
+    const { sorter } = this;
+
+    if (sorter) {
+      cancel && (sorter.moved = 0);
+      sorter.endMove();
+    }
+
     em.trigger('canvas:dragend', ev);
   }
 
@@ -63,10 +67,12 @@ export default class Droppable {
     const content = em.get('dragContent') || '<br>';
 
     if (em.inAbsoluteMode()) {
-      console.log('im in absolute mode', content);
-      const target = {}; // create and append to Components
+      const target = em
+        .get('DomComponents')
+        .getWrapper()
+        .append(content, { at: 0 })[0];
       em.get('Commands').run('core:component-drag', {
-        guidesInfo: 1,
+        // guidesInfo: 1,
         target,
         onEnd: () => {
           // em.runDefault(defComOptions);
@@ -115,14 +121,17 @@ export default class Droppable {
 
   handleDrop(ev) {
     ev.preventDefault();
+    const { sorter } = this;
     const dt = ev.dataTransfer;
     const content = this.getContentByData(dt).content;
     ev.target.style.border = '';
 
-    if (content) {
-      this.sorter.setDropContent(content);
-    } else {
-      this.sorter.moved = 0;
+    if (sorter) {
+      if (content) {
+        sorter.setDropContent(content);
+      } else {
+        sorter.moved = 0;
+      }
     }
 
     this.endDrop(0, ev);