Drag placeholder for rendered elements

[austinbiggs]

Hello! I'm digging through code and I'm trying to achieve a placeholder effect while dragging the element? Something similar already exists for dragging blocks.

If I want to add something to achieve this, what method would I need to modify/hook into? I don't see a startDrag option for elements on the canvas.

  /**
   * Start block dragging
   * @private
   */
  startDrag: function startDrag(e) {
    //Right or middel click
    if (e.button !== 0) {
      return;
    }

    if (!this.config.getSorter) {
      return;
    }

    this.config.em.refreshCanvas();
    var sorter = this.config.getSorter();
    sorter.setDragHelper(this.el, e);
    sorter.setDropContent(this.model.get('content'));
    sorter.startSort(this.el);
    (0, _mixins.on)(document, 'mouseup', this.endDrag);
  },

similar to: http://gridstackjs.com/

[artf]

Actually, I was thinking about adding such a functionality but didn't go so far 😬
https://github.com/artf/grapesjs/blob/dev/src/commands/view/MoveComponent.js#L74

[austinbiggs]

@artf - May I ask why you stopped the implementation?

If it's something I believe I can solve, I'd like to try to finish it and make a PR.

[artf]

I don't remember exactly why but I'd appreciate a PR for this (preferably disabled by default and activable via configuration)

[austinbiggs]

@artf - I was playing around with it, and if the user is dragging an element that isn't a photo, it looks a bit funny, since the CSS doesn't apply to the elements in the placeholder. Any thoughts?

[artf]

Probably the reason of why I gave up 😂
As you see from here
https://github.com/artf/grapesjs/blob/dev/src/commands/view/MoveComponent.js#L74
I tried using setDragHelper which copies the element's style from getComputedStyle but I also remove its children dragHelper.innerHTML = '' as getting inners style could be too much expensive. At the moment, I see these possible solutions:

1. Show only the shape of the element
2. Let the user define its function which returns the placeholder element
3. Find a way to use the native HTML5 d&d "ghost" image (creates already a screenshot of the element). One of the problems with this is to trigger drag event by clicking external element (in our case move icon)

[austinbiggs]

@artf - Do you think this would be easier now that GrapesJS uses native DnD?

[artf]

Unfortunately, moving components is slightly different so I'm still working on this

[ahmeddabak]

Hi @artf @AustinTBiggs , what is the status for this feature.
i am thinking about doing some work on it this week end 😃

[artf]

Still in progress @ahmeddabak
I was trying to make native DnD work also on components inside the canvas (for now its enabled for blocks and external d&d). Doesn't seem like a big deal but the problem is to trigger it from the 'move' toolbar button.
Here you find how to activate the dragstart event on the button https://github.com/artf/grapesjs/blob/dev/src/dom_components/model/Component.js#L535
The logic of setting up the DragImage is inside tlb-move https://github.com/artf/grapesjs/blob/dev/src/commands/index.js#L143

[jacobisknight]

I know it's been 4 years since this feature was last discussed. Any possibility that it will be completed?