Extend Droppable with a custom call

src/block_manager/index.js

@@ -115,10 +115,24 @@ export default () => {
       return {
         bm: this,
         blocks: this.getAll().models,
-        container: bhv.container
+        container: bhv.container,
+        drag: block => {
+          const cnt = block.getContent ? block.getContent() : block;
+          this.em.set('dragContent', cnt);
+          this.__startSorter(block);
+        }
       };
     },
 
+    __startSorter(block) {
+      // block:drag
+      const frameViews = this.em
+        .get('Canvas')
+        .getFrames()
+        .map(frame => frame.view);
+      frameViews.forEach(fv => fv.droppable.startCustom());
+    },
+
     __behaviour(opts = {}) {
       return (this._bhv = {
         ...(this._bhv || {}),

src/block_manager/view/BlocksView.js

@@ -5,7 +5,7 @@ import CategoryView from './CategoryView';
 
 export default Backbone.View.extend({
   initialize(opts, config) {
-    bindAll(this, 'getSorter', 'onDrag', 'onDrop');
+    bindAll(this, 'getSorter', 'onDrag', 'onDrop', 'onMove');
     this.config = config || {};
     this.categories = opts.categories || '';
     this.renderedCategories = [];

src/canvas/view/FrameView.js

@@ -434,6 +434,7 @@ export default Backbone.View.extend({
     [
       { event: 'keydown keyup keypress', class: 'KeyboardEvent' },
       { event: 'mousedown mousemove mouseup', class: 'MouseEvent' },
+      { event: 'pointerdown pointermove pointerup', class: 'PointerEvent' },
       { event: 'wheel', class: 'WheelEvent' }
     ].forEach(obj =>
       obj.event.split(' ').forEach(event => {

src/utils/Droppable.js

@@ -38,6 +38,37 @@ export default class Droppable {
     methods[method](el, 'dragleave', this.handleDragLeave);
   }
 
+  __customTglEff(enable) {
+    const method = enable ? on : off;
+    const doc = this.el.ownerDocument;
+    const frameEl = doc.defaultView.frameElement;
+    this.sortOpts = enable
+      ? {
+          onStart({ sorter }) {
+            on(frameEl, 'pointermove', sorter.onMove);
+          },
+          onEnd({ sorter }) {
+            off(frameEl, 'pointermove', sorter.onMove);
+          },
+          customTarget({ event }) {
+            return doc.elementFromPoint(event.clientX, event.clientY);
+          }
+        }
+      : null;
+    method(frameEl, 'pointerenter', this.handleDragEnter);
+    method(frameEl, 'pointermove', this.handleDragOver);
+    method(document, 'pointerup', this.handleDrop);
+    method(frameEl, 'pointerout', this.handleDragLeave);
+
+    // Test with touche devices (seems like frameEl is not capturing pointer events).
+    // on/off(document, 'pointermove', sorter.onMove); // for the sorter
+    // enable && this.handleDragEnter({}); // no way to use pointerenter/pointerout
+  }
+
+  startCustom() {
+    this.__customTglEff(true);
+  }
+
   endDrop(cancel, ev) {
     const { em, dragStop } = this;
     this.counter = 0;
@@ -104,7 +135,8 @@ export default class Droppable {
         itemSel: '*',
         pfx: 'gjs-',
         onEndMove: model => this.handleDragEnd(model, dt),
-        document: this.el.ownerDocument
+        document: this.el.ownerDocument,
+        ...(this.sortOpts || {})
       });
       sorter.setDropContent(content);
       sorter.startSort();
@@ -152,14 +184,15 @@ export default class Droppable {
     ev.target.style.border = '';
     content && dragContent && dragContent(content);
     this.endDrop(!content, ev);
+    this.__customTglEff(false);
   }
 
-  getContentByData(dataTransfer) {
+  getContentByData(dt) {
     const em = this.em;
-    const types = dataTransfer.types;
-    const files = dataTransfer.files || [];
+    const types = dt && dt.types;
+    const files = (dt && dt.files) || [];
     const dragContent = em.get('dragContent');
-    let content = dataTransfer.getData('text');
+    let content = dt && dt.getData('text');
 
     if (files.length) {
       content = [];
@@ -178,9 +211,7 @@ export default class Droppable {
     } else if (dragContent) {
       content = dragContent;
     } else if (indexOf(types, 'text/html') >= 0) {
-      content = dataTransfer
-        .getData('text/html')
-        .replace(/<\/?meta[^>]*>/g, '');
+      content = dt && dt.getData('text/html').replace(/<\/?meta[^>]*>/g, '');
     } else if (indexOf(types, 'text/uri-list') >= 0) {
       content = {
         type: 'link',
@@ -188,7 +219,7 @@ export default class Droppable {
         content: content
       };
     } else if (indexOf(types, 'text/json') >= 0) {
-      const json = dataTransfer.getData('text/json');
+      const json = dt && dt.getData('text/json');
       json && (content = JSON.parse(json));
     } else if (types.length === 1 && types[0] === 'text/plain') {
       // Avoid dropping non-selectable and non-editable text nodes inside the editor
@@ -196,7 +227,7 @@ export default class Droppable {
     }
 
     const result = { content };
-    em.trigger('canvas:dragdata', dataTransfer, result);
+    em.trigger('canvas:dragdata', dt, result);
 
     return result;
   }

src/utils/Sorter.js

@@ -48,6 +48,8 @@ export default Backbone.View.extend({
     this.freezeClass = o.freezeClass || this.pfx + 'freezed';
     this.onStart = o.onStart || '';
     this.onEndMove = o.onEndMove || '';
+    this.customTarget = o.customTarget;
+    this.onEnd = o.onEnd;
     this.direction = o.direction || 'v'; // v (vertical), h (horizontal), a (auto)
     this.onMoveClb = o.onMove || '';
     this.relative = o.relative || 0;
@@ -329,6 +331,7 @@ export default Backbone.View.extend({
     on(docs, 'keydown', this.rollback);
     onStart &&
       onStart({
+        sorter: this,
         target: srcModel,
         parent: srcModel && srcModel.parent(),
         index: srcModel && srcModel.index()
@@ -426,7 +429,7 @@ export default Backbone.View.extend({
    * */
   onMove(e) {
     const ev = e;
-    const { em, onMoveClb, plh } = this;
+    const { em, onMoveClb, plh, customTarget } = this;
     this.moved = 1;
 
     // Turn placeholder visibile
@@ -454,7 +457,10 @@ export default Backbone.View.extend({
 
     //var targetNew = this.getTargetFromEl(e.target);
     const sourceModel = this.getSourceModel();
-    const dims = this.dimsFromTarget(e.target, rX, rY);
+    const targetEl = customTarget
+      ? customTarget({ sorter: this, event: e })
+      : e.target;
+    const dims = this.dimsFromTarget(targetEl, rX, rY);
     const target = this.target;
     const targetModel = target && this.getTargetModel(target);
     this.selectTargetModel(targetModel, sourceModel);
@@ -1035,10 +1041,11 @@ export default Backbone.View.extend({
     const docs = this.getDocuments();
     const container = this.getContainerEl();
     const onEndMove = this.onEndMove;
+    const onEnd = this.onEnd;
     const { target, lastPos } = this;
     let srcModel;
-    off(container, 'mousemove dragover', this.onMove);
-    off(docs, 'mouseup dragend touchend', this.endMove);
+    off(container, 'mousemove dragover pointermove', this.onMove);
+    off(docs, 'mouseup dragend touchend pointerup', this.endMove);
     off(docs, 'keydown', this.rollback);
     this.plh.style.display = 'none';
 
@@ -1084,6 +1091,8 @@ export default Backbone.View.extend({
         ? moved.forEach(m => onEndMove(m, this, data))
         : onEndMove(null, this, { ...data, cancelled: 1 });
     }
+
+    isFunction(onEnd) && onEnd({ sorter: this });
   },
 
   /**