Check draggability for blocks by using `hasDnd` and `nativeDnd`

src/block_manager/view/BlockView.js

@@ -1,4 +1,4 @@
-import { on, off } from 'utils/mixins';
+import { on, off, hasDnd } from 'utils/mixins';
 
 module.exports = Backbone.View.extend({
   events: {
@@ -7,6 +7,7 @@ module.exports = Backbone.View.extend({
   },
 
   initialize(o, config = {}) {
+    this.em = config.em;
     this.config = config;
     this.endDrag = this.endDrag.bind(this);
     this.ppfx = config.pStylePrefix || '';
@@ -59,7 +60,7 @@ module.exports = Backbone.View.extend({
     const label = this.model.get('label');
     el.className += ` ${className} ${pfx}one-bg ${pfx}four-color-h`;
     el.innerHTML = `<div class="${className}-label">${label}</div>`;
-    el.setAttribute('draggable', true);
+    hasDnd(this.em) && el.setAttribute('draggable', true);
     return this;
   }
 });

src/commands/index.js

@@ -190,6 +190,7 @@ module.exports = () => {
               }
             });
           } else {
+            console.log(em.get('Config'));
             if (event.type == 'dragstart') {
               event.dataTransfer.setDragImage(sel.view.el, 0, 0);
               //sel.set('status', 'freezed');

src/editor/config/config.js

@@ -59,6 +59,9 @@ module.exports = {
   // Return JS of components inside HTML from 'editor.getHtml()'
   jsInHtml: true,
 
+  // Enable native HTML5 drag and drop
+  nativeDnD: 0,
+
   // Show the wrapper component in the final code, eg. in editor.getHtml()
   exportWrapper: 0,
 

src/utils/Sorter.js

@@ -907,7 +907,7 @@ module.exports = Backbone.View.extend({
     const docs = this.getDocuments();
     const container = this.getContainerEl();
     off(container, 'mousemove dragover', this.onMove);
-    off(docs, 'mouseup', this.endMove);
+    off(docs, 'mouseup dragend', this.endMove);
     off(docs, 'keydown', this.rollback);
     //this.$document.off('mouseup', this.endMove);
     //this.$document.off('keydown', this.rollback);

src/utils/mixins.js

@@ -90,9 +90,17 @@ const normalizeFloat = (value, step = 1, valueDef = 0) => {
   return stepDecimals ? parseFloat(value.toFixed(stepDecimals)) : value;
 };
 
+const hasDnd = em => {
+  return (
+    'draggable' in document.createElement('i') &&
+    (em ? em.get('Config').nativeDnD : 1)
+  );
+};
+
 export {
   on,
   off,
+  hasDnd,
   upFirst,
   matches,
   camelCase,