[Question] Create space where component would drop
Question
As mentioned in the title (which may be a bit confusing), I'm curious about how to create a space where component would drop. This is very common in implementations of dragging/sorting I've seen. (eg. https://shopify.github.io/draggable/ and jQuery Sortable)
From what I understand of the drop placeholder (green bar in attachment), it's in a separate "Layer" and actually lives outside the canvas. I want to implement a better drop placeholder, I'm just not sure where to start when implementing this.
I have a similar request open regarding the DRAG placeholder, however, I'm speaking about the DROP placeholder in this issue.
The following code doesn't return what I would expect either...
editor.on('sorter:drag:start', (src, srcModel) => {
console.log( 'src: ', src );
console.log( 'srcModel: ', srcModel );
})

Answers (3)
Hello @austinbiggs, any updates about this?
Thank you!
From what I understand of the drop placeholder (green bar in attachment), it's in a separate "Layer" and actually lives outside the canvas. I want to implement a better drop placeholder, I'm just not sure where to start when implementing this.
Exactly and the reason behind this approach is better performances (less DOM manipulations) and IMHO less confusing, so I don't have any valid reason to start working on this feature. If you want to start by yourself I think onMove method from the Sorter is a good start
Hello @austinbiggs ,
I am interested in the feature you mentioned above, so any updates? Did you start and manage to do it?
Thank you.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3239
[Question] How to update attribute/properties dynamically from Component Script?
We have a use case where we want to insert charts dynamically using Highcharts Editor. I have created a component, which on drag and drop,...
Issue #1735
Vuejs components builder
Hi, it would be nice to have vue components builder like mjml.. This user started project: https://github.com/Patrick-Spiegel/vue-grapesjs...
Issue #1341
[Question] How to work with Custom Components
Hello, I have some questions and issues about and with the grapes editorProblem 1 In a component, which class is there extended? Is it real...
Issue #3939
BUG: Disabled drag and drop in preview
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? v95Reproducible demo link https://codesandbo...
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.