Setup Dragger in FrameWrapView

src/canvas/index.js

@@ -626,6 +626,11 @@ export default () => {
       return zoom ? 1 / zoom : 1;
     },
 
+    toggleFramesEvents(on) {
+      const { style } = this.getFramesEl();
+      style.pointerEvents = on ? '' : 'none';
+    },
+
     /**
      * Returns wrapper element
      * @return {HTMLElement}

src/canvas/view/FrameWrapView.js

@@ -2,13 +2,15 @@ import Backbone from 'backbone';
 import FrameView from './FrameView';
 import { bindAll, isNumber, isNull, debounce } from 'underscore';
 import { createEl } from 'utils/dom';
+import Dragger from 'utils/Dragger';
 
 const motionsEv =
   'transitionend oTransitionEnd transitionend webkitTransitionEnd';
 
 export default Backbone.View.extend({
   events: {
-    'click [data-action-remove]': 'remove'
+    'click [data-action-remove]': 'remove',
+    'mousedown [data-action-move]': 'startDrag'
   },
 
   initialize(opts = {}, conf = {}) {
@@ -18,15 +20,46 @@ export default Backbone.View.extend({
       ...(opts.config || conf),
       frameWrapView: this
     };
-    const { canvasView } = config;
+    const { canvasView, em } = config;
     this.cv = canvasView;
     this.config = config;
-    this.em = config.em;
+    this.em = em;
+    this.canvas = em && em.get('Canvas');
     this.ppfx = config.pStylePrefix || '';
     this.frame = new FrameView({ model, config });
     this.listenTo(model, 'change:x change:y', this.updatePos);
     this.listenTo(model, 'loaded change:width change:height', this.updateDim);
     this.updatePos();
+    this.setupDragger();
+  },
+
+  setupDragger() {
+    const { canvas, model } = this;
+    let dragX, dragY, zoom;
+    const toggleEffects = on => {
+      canvas.toggleFramesEvents(on);
+    };
+
+    this.dragger = new Dragger({
+      onStart: () => {
+        const { x, y } = model.attributes;
+        zoom = this.em.getZoomMultiplier();
+        dragX = x;
+        dragY = y;
+        toggleEffects();
+      },
+      onEnd: () => toggleEffects(1),
+      setPosition: posOpts => {
+        model.set({
+          x: dragX + posOpts.x * zoom,
+          y: dragY + posOpts.y * zoom
+        });
+      }
+    });
+  },
+
+  startDrag(ev) {
+    ev && this.dragger.start(ev);
   },
 
   remove() {
@@ -106,10 +139,12 @@ export default Backbone.View.extend({
       })
       .append(
         `<div class="${ppfx}frame-wrapper__header">
-        <div class="${ppfx}frame-wrapper__name">${model.get('name') || ''}</div>
-        <div data-action-remove>
-          <i class="fa fa-trash"></i>
+        <div class="${ppfx}frame-wrapper__name" data-action-move>
+          ${model.get('name') || ''}
         </div>
+        <span data-action-remove>
+          <i class="fa fa-trash"></i>
+        </span>
       </div>`
       )
       .append(frame.el);

src/commands/view/SelectComponent.js

@@ -390,7 +390,6 @@ export default {
       !isElement(elem) && isTaggableNode(elem) ? elem : em.getSelected();
     const resizable = model.get('resizable');
     const el = isElement(elem) ? elem : model.getEl();
-    const framesElStyle = canvas.getFramesEl().style;
     let options = {};
     let modelToStyle;
 
@@ -421,7 +420,7 @@ export default {
           } = config;
           toggleBodyClass('add', e, opts);
           modelToStyle = em.get('StyleManager').getModelToStyle(model);
-          framesElStyle.pointerEvents = 'none';
+          canvas.toggleFramesEvents();
           const computedStyle = getComputedStyle(el);
           const modelStyle = modelToStyle.getStyle();
 
@@ -455,7 +454,7 @@ export default {
         onEnd(e, opts) {
           toggleBodyClass('remove', e, opts);
           editor.trigger('component:resize');
-          framesElStyle.pointerEvents = '';
+          canvas.toggleFramesEvents(1);
           showOffsets = 1;
         },
 

src/editor/model/Editor.js

@@ -635,6 +635,10 @@ export default Backbone.Model.extend({
     return this.get('Canvas').getZoomDecimal();
   },
 
+  getZoomMultiplier() {
+    return this.get('Canvas').getZoomMultiplier();
+  },
+
   setDragMode(value) {
     return this.set('dmode', value);
   },