Handle drag cancel for absolute mode

src/commands/view/ComponentDrag.js

@@ -420,8 +420,8 @@ module.exports = {
     const { ppfx, editor } = this;
     const methodCls = on ? 'add' : 'remove';
     const canvas = this.getCanvas();
-    const classes = [`${ppfx}is__grabbing`];
+    // const classes = [`${ppfx}is__grabbing`];
-    classes.forEach(cls => canvas.classList[methodCls](cls));
+    // classes.forEach(cls => canvas.classList[methodCls](cls));
     editor.Canvas[on ? 'startAutoscroll' : 'stopAutoscroll']();
   }
 };

src/utils/Dragger.js

@@ -61,7 +61,7 @@ export default class Dragger {
       // Scale result points, can also be a function
       scale: 1
     };
-    bindAll(this, 'drag', 'stop', 'cancel');
+    bindAll(this, 'drag', 'stop', 'keyHandle');
     this.setOptions(opts);
     this.delta = { x: 0, y: 0 };
     return this;
@@ -85,7 +85,7 @@ export default class Dragger {
     const methods = { on, off };
     methods[method](container, 'mousemove dragover', this.drag);
     methods[method](docs, 'mouseup dragend touchend', this.stop);
-    methods[method](docs, 'keydown', this.cancel);
+    methods[method](docs, 'keydown', this.keyHandle);
   }
 
   /**
@@ -245,7 +245,7 @@ export default class Dragger {
     isFunction(onEnd) && onEnd(ev, this, { cancelled });
   }
 
-  cancel(ev) {
+  keyHandle(ev) {
     if (isEscKey(ev)) {
       this.stop(ev, { cancel: 1 });
     }

src/utils/Droppable.js

@@ -30,17 +30,10 @@ export default class Droppable {
   }
 
   endDrop(cancel, ev) {
-    const em = this.em;
+    const { em, dragStop } = this;
     this.counter = 0;
     this.over = 0;
-    // force out like in BlockView
+    dragStop && dragStop(cancel);
-    const { sorter } = this;
-
-    if (sorter) {
-      cancel && (sorter.moved = 0);
-      sorter.endMove();
-    }
-
     em.runDefault();
     em.trigger('canvas:dragend', ev);
   }
@@ -68,11 +61,12 @@ export default class Droppable {
     const content = em.get('dragContent') || '<br>';
     const container = canvas.getBody();
     em.stopDefault();
+    let dragStop;
 
     if (em.inAbsoluteMode()) {
       const wrapper = em.get('DomComponents').getWrapper();
       const target = wrapper.append({})[0];
-      em.get('Commands').run('core:component-drag', {
+      const dragger = em.get('Commands').run('core:component-drag', {
         event: ev,
         guidesInfo: 1,
         center: 1,
@@ -87,8 +81,9 @@ export default class Droppable {
           target.remove();
         }
       });
+      dragStop = cancel => dragger.stop(ev, { cancel });
     } else {
-      this.sorter = new utils.Sorter({
+      const sorter = new utils.Sorter({
         em,
         wmargin: 1,
         nested: 1,
@@ -102,10 +97,16 @@ export default class Droppable {
         onEndMove: model => this.handleDragEnd(model, dt),
         document: canvas.getFrameEl().contentDocument
       });
-      this.sorter.setDropContent(content);
+      sorter.setDropContent(content);
-      this.sorter.startSort();
+      sorter.startSort();
+      this.sorter = sorter;
+      dragStop = cancel => {
+        cancel && (sorter.moved = 0);
+        sorter.endMove();
+      };
     }
 
+    this.dragStop = dragStop;
     em.trigger('canvas:dragenter', dt, content);
   }