Repository navigation
Drag placeholder for rendered elements #705
Description
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/
Activity
artf commentedon Jan 4, 2018
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 commentedon Jan 4, 2018
@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 commentedon Jan 4, 2018
I don't remember exactly why but I'd appreciate a PR for this (preferably disabled by default and activable via configuration)
austinbiggs commentedon Jan 4, 2018
@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 commentedon Jan 4, 2018
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
setDragHelperwhich copies the element's style fromgetComputedStylebut I also remove its childrendragHelper.innerHTML = ''as getting inners style could be too much expensive. At the moment, I see these possible solutions:austinbiggs commentedon Jan 19, 2018
@artf - Do you think this would be easier now that GrapesJS uses native DnD?
artf commentedon Jan 20, 2018
Unfortunately, moving components is slightly different so I'm still working on this
ahmeddabak commentedon Mar 2, 2018
Hi @artf @AustinTBiggs , what is the status for this feature.
i am thinking about doing some work on it this week end 😃
artf commentedon Mar 4, 2018
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-movehttps://github.com/artf/grapesjs/blob/dev/src/commands/index.js#L143jacobisknight commentedon Nov 3, 2022
I know it's been 4 years since this feature was last discussed. Any possibility that it will be completed?