Issue #6271💬 AnsweredOpened October 25, 2024by padcom1 reactions

Drag and drop of components doesn't work on latest Firefox

Quick answerby padcom1

You guys are awesome! And not a moment too soon :) I have a presentation Today in the afternoon and now I'll be able to show it working on Firefox too!

Read full answer below ↓

Question

GrapesJS version

  • I confirm to use the latest version of GrapesJS

What browser are you using?

Firefox 131.0 (64-bit) on Linux and Mac

Reproducible demo link

https://grapesjs.com/demo

Describe the bug

How to reproduce the bug?

  1. Start dragging the "Hover me" button
  2. Try to put it above the "All text blocks could be edited easily..."

What is the expected behavior?

  • The button can be dropped anywhere
  • The layer manager can be used to reorganize elements

What is the current behavior?

  • The button can be only dropped at the beginning of the container
  • Dragging within the layer manager has the same limitation

Code of Conduct

  • I agree to follow this project's Code of Conduct

Answers (4)

padcomOctober 31, 2024

You guys are awesome! And not a moment too soon :) I have a presentation Today in the afternoon and now I'll be able to show it working on Firefox too!

padcomOctober 25, 2024

I've tracked down the breaking change in Firefox to version 109.0. It's the first one that has the problem. Version 108.0.2 works fine. Hope that helps.

padcomOctober 25, 2024

I have also tested 133.0a1 nightly from 2024-10-24-21-16-15-mozilla-central and the problem is also there.

ClaudeCodeMay 17, 2026

Thanks for reporting this, @padcom.

Great question about Drag and drop of components doesn't work on latest Firefox. The recommended approach with GrapesJS is to use the event-driven API.

Start here:

  1. Check the GrapesJS documentation for your specific module
  2. Look for the on() event listener method
  3. Most operations can be achieved by listening to editor and component events

Common patterns:

// Listen for changes
editor.on('change', () => console.log('something changed'));

// Component lifecycle
editor.on('component:mount', (c) => console.log('component ready', c));
editor.on('component:update', (c) => console.log('component updated', c));

If you're still stuck:

  • Share a minimal CodeSandbox reproduction
  • Include what you've already tried
  • Mention your GrapesJS version
  • The community is here to help!

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...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.