How to Customize Drag Behavior and Make Indicator Occupy Full Space in GrapesJS

[fredrickreuben]

I’m currently working on customizing the drag-and-drop behavior in GrapesJS, and I need help with a few things related to the default behavior:

1. Static Green Line: By default, a green line appears to indicate the drop position during the drag action. I’d like to either remove or customize this line.

2. Full-Space Indicator: Instead of just a line, I want the drag indicator to occupy the entire space (e.g., filling the area between the elements where the dragged component is about to be dropped). I’d like to change the appearance and behavior of this indicator.

So far, I’ve tried inspecting the elements, but I haven’t been able to identify the correct CSS selectors or classes to target for these changes. Could someone guide me on how to:

1. Remove or modify the default green line.
2. Make the indicator fill the available space instead of just a line.
3. Apply custom styles to the element during dragging (e.g., highlighting, background colors, borders, etc.).

If there’s a configuration option or specific code snippet that can help achieve this, I’d greatly appreciate it.

[mohamedsalem401]

@fredrickreuben
The placeholder class name goes as follows:

• Base class: .{prefix}-placeholder, where .{prefix} is the prefix defined for your GrapesJS instance. For example, if your prefix is gjs, the base class would be .gjs-placeholder.
• Orientation classes: To specify the orientation of the placeholder, you can add either .horizontal or .vertical as a modifier class. For example, a horizontal placeholder would have the class .gjs-placeholder.horizontal.

There's also an internal div, here's the actual code

<div class="${ppfx}placeholder">
  <div class="${ppfx}placeholder-int"></div>
</div>

It may not be a great solution to override the CSS for the placeholder, but I think it should work though

[fredrickreuben]

I solved it using Canvas Spot thanks for your answer