Add draggableComponents option in DomComponents

src/commands/index.js

@@ -118,12 +118,13 @@ module.exports = () => {
       };
 
       defaultCommands['tlb-move'] = {
-        run(ed, sender, opts) {
+        run(ed, sender, opts = {}) {
           let dragger;
           const em = ed.getModel();
           const event = opts && opts.event;
-          const sel = ed.getSelected();
-          const selAll = [...ed.getSelectedAll()];
+          const { target } = opts;
+          const sel = target || ed.getSelected();
+          const selAll = target ? [target] : [...ed.getSelectedAll()];
           const nativeDrag = event && event.type == 'dragstart';
           const defComOptions = { preserveSelected: 1 };
           const modes = ['absolute', 'translate'];
@@ -137,7 +138,7 @@ module.exports = () => {
           const mode = sel.get('dmode') || em.get('dmode');
 
           // Without setTimeout the ghost image disappears
-          nativeDrag ? setTimeout(() => hideTlb, 0) : hideTlb();
+          nativeDrag ? setTimeout(hideTlb, 0) : hideTlb();
 
           const onEnd = (e, opts) => {
             em.runDefault(defComOptions);

src/dom_components/config/config.js

@@ -26,11 +26,8 @@ module.exports = {
   // Could be used for default components
   components: [],
 
-  // Class for new image component
-  imageCompClass: 'fa fa-picture-o',
-
-  // Open assets manager on create of image component
-  oAssetsOnCreate: true,
+  // If the component is draggable you can drag the component itself (not only from the toolbar)
+  draggableComponents: 1,
 
   // Generally, if you don't edit the wrapper in the editor, like
   // custom attributes, you don't need the wrapper stored in your JSON

src/dom_components/view/ComponentImageView.js

@@ -8,8 +8,7 @@ module.exports = ComponentView.extend({
     dblclick: 'onActive',
     click: 'initResize',
     error: 'onError',
-    dragstart: 'noDrag',
-    mousedown: 'noDrag'
+    dragstart: 'noDrag'
   },
 
   initialize(o) {

src/dom_components/view/ComponentView.js

@@ -19,6 +19,8 @@ module.exports = Backbone.View.extend({
     const config = opt.config || {};
     const em = config.em;
     const modelOpt = model.opt || {};
+    const { $el } = this;
+    const { draggableComponents } = config;
     this.opts = opt;
     this.modelOpt = modelOpt;
     this.config = config;
@@ -27,7 +29,6 @@ module.exports = Backbone.View.extend({
     this.ppfx = config.pStylePrefix || '';
     this.attr = model.get('attributes');
     this.classe = this.attr.class || [];
-    const $el = this.$el;
     this.listenTo(model, 'change:style', this.updateStyle);
     this.listenTo(model, 'change:attributes', this.renderAttributes);
     this.listenTo(model, 'change:highlightable', this.updateHighlight);
@@ -41,6 +42,11 @@ module.exports = Backbone.View.extend({
     model.view = this;
     this.initClasses();
     this.initComponents({ avoidRender: 1 });
+    this.events = {
+      ...this.events,
+      ...(draggableComponents && { dragstart: 'handleDragStart' })
+    };
+    this.delegateEvents();
     !modelOpt.temporary && this.init();
   },
 
@@ -54,6 +60,15 @@ module.exports = Backbone.View.extend({
    */
   onActive() {},
 
+  handleDragStart(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    this.em.get('Commands').run('tlb-move', {
+      target: this.model,
+      event
+    });
+  },
+
   initClasses() {
     const { model } = this;
     const event = 'change:classes';
@@ -235,11 +250,15 @@ module.exports = Backbone.View.extend({
    * */
   updateAttributes() {
     const attrs = [];
-    const { model, $el, el } = this;
+    const { model, $el, el, config } = this;
+    const { highlightable, textable, type } = model.attributes;
+    const { draggableComponents } = config;
+
     const defaultAttr = {
-      'data-gjs-type': model.get('type') || 'default',
-      ...(model.get('highlightable') && { 'data-highlightable': 1 }),
-      ...(model.get('textable') && {
+      'data-gjs-type': type || 'default',
+      ...(draggableComponents && { draggable: true }),
+      ...(highlightable && { 'data-highlightable': 1 }),
+      ...(textable && {
         contenteditable: 'false',
         'data-gjs-textable': 'true'
       })