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)
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:
- Show only the shape of the element
- Let the user define its function which returns the placeholder element
- 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)
Unfortunately, moving components is slightly different so I'm still working on this
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
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2961
BUG: Components in custom modal isn't editable
Hello, I'm trying to add custom modal block to my project and I want to change content of this modal also with drag&drop. Here's code of my...
Issue #2595
[Question] Having trouble dragging external html with draggable="true"
I want to make an external html element able to be dragged into GrapesJS, like how you can drag in a block and it will add something. I hav...
Issue #710
Make an entire element draggable, not just the handle
I'm working on modifying the handle from draggable elements, in addition to having a handle, I'd like the entire element to be draggable. L...
Issue #697
Question: Dropping external element into blocks
Hello, I want to drop external elements ( for example, tree view node) into blocks. Can you please help me out to show a way, how to achiev...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.