Issue #705Opened January 4, 2018by austinbiggs2 reactions

Drag placeholder for rendered elements

Question

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/

Answers (3)

artfJanuary 4, 20181 reactions

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)
artfJanuary 20, 20181 reactions

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

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.