Make the dragger react on drag events

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() {

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);
   }
 
   /**

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);