Add HTML5 D&D support in `tlb-move`

src/commands/index.js

@@ -142,8 +142,16 @@ module.exports = () => {
 
       defaultCommands['tlb-move'] = {
         run(ed, sender, opts) {
-          var sel = ed.getSelected();
-          var dragger;
+          let dragger;
+          const em = ed.getModel();
+          const event = opts && opts.event;
+          const sel = ed.getSelected();
+          const toolbarStyle = ed.Canvas.getToolbarEl().style;
+
+          setTimeout(() => {
+            toolbarStyle.display = 'none';
+            em.stopDefault();
+          }, 0);
 
           if (!sel || !sel.get('draggable')) {
             console.warn('The element is not draggable');
@@ -160,7 +168,7 @@ module.exports = () => {
 
           const onEnd = (e, opts) => {
             em.runDefault();
-            em.set('selectedComponent', sel);
+            em.setSelected(sel);
             sel.emitUpdate();
             dragger && dragger.blur();
           };
@@ -170,24 +178,24 @@ module.exports = () => {
             console.log('Current ', opts.current);
           };
 
-          var toolbarEl = ed.Canvas.getToolbarEl();
-          toolbarEl.style.display = 'none';
-          var em = ed.getModel();
-          em.stopDefault();
-
           if (em.get('designerMode')) {
             // TODO move grabbing func in editor/canvas from the Sorter
             dragger = editor.runCommand('drag', {
               el: sel.view.el,
               options: {
-                event: opts && opts.event,
+                event,
                 onStart,
                 onDrag,
                 onEnd
               }
             });
           } else {
-            var cmdMove = ed.Commands.get('move-comp');
+            if (event.type == 'dragstart') {
+              event.dataTransfer.setDragImage(sel.view.el, 0, 0);
+              //sel.set('status', 'freezed');
+            }
+
+            const cmdMove = ed.Commands.get('move-comp');
             cmdMove.onEndMoveFromModel = onEnd;
             cmdMove.initSorterFromModel(sel);
           }

src/dom_components/model/Component.js

@@ -497,7 +497,8 @@ const Component = Backbone.Model.extend(Styleable).extend(
         }
         if (model.get('draggable')) {
           tb.push({
-            attributes: { class: 'fa fa-arrows' },
+            attributes: { class: 'fa fa-arrows', draggable: true },
+            events: { dragstart: 'execCommand' },
             command: 'tlb-move'
           });
         }

src/dom_components/view/ToolbarButtonView.js

@@ -1,8 +1,12 @@
 var Backbone = require('backbone');
 
 module.exports = Backbone.View.extend({
-  events: {
-    mousedown: 'handleClick'
+  events() {
+    return (
+      this.model.get('events') || {
+        mousedown: 'handleClick'
+      }
+    );
   },
 
   attributes() {
@@ -16,6 +20,10 @@ module.exports = Backbone.View.extend({
   handleClick(event) {
     event.preventDefault();
     event.stopPropagation();
+    this.execCommand(event);
+  },
+
+  execCommand(event) {
     const opts = { event };
     const command = this.model.get('command');
     const editor = this.editor;

src/utils/Sorter.js

@@ -278,7 +278,7 @@ module.exports = Backbone.View.extend({
     }
 
     on(container, 'mousemove dragover', this.onMove);
-    on(docs, 'mouseup', this.endMove);
+    on(docs, 'mouseup dragend', this.endMove);
     on(docs, 'keydown', this.rollback);
     onStart && onStart();