Disabled drag and drop in preview
Hi @xQwexx what would be your solution in such a case? We still need to keep the D&D disabled in the preview. Can you also post your component code in order to understand better the use case?
Read full answer below โQuestion
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? v95Reproducible demo link https://codesandbox.io/s/grapes-border-issue-forked-2c0ib?file=/src/index.js:10258-10261Describe the bug How to reproduce the bug? I am trying to create a custom component, which contains drag end drop feature, and due to the fix of #2904 the draggable attribute is turned off altogether. What is the expected behavior? The custom component that made intentionally draggable could be previewed as such What is the current behavior? Currently all of the draggable events are disa...
Answers (4)
Hi @xQwexx what would be your solution in such a case? We still need to keep the D&D disabled in the preview. Can you also post your component code in order to understand better the use case?
This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we ne...
Hi @artf I updated with a demo, also my suggestion would be that use the attributes: { draggable: 'true'}, indicator if the component is draggable in preview and leave the drag handling for the component template like attributes: { draggable: 'true', ondrop: 'drop(event)' , ondragover: 'allowDrop(e...
Thanks for reporting this, @xQwexx. Great suggestion about Disabled drag and drop in preview! While this specific feature isn't yet in the core API, there are several ways to achieve similar behavior. Using the event system: Alternative approaches: Listen to selector:add for CSS selector changes Us...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #4654
Custom component for text node including special characters
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v105 Reproducible demo link https:/...
Issue #6032
Image Component allows upload and selection of video files via drag and drop
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v126 Reproducible demo link https:/...
Issue #3806
Target :null when adding video
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? chrome new version Reproducible demo link...
Issue #6603
Ampersand is not escaped in attribute value
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v142.0.7392.0 (canary) Reproducible...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins โ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.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins โ TinyMCE Inline Text Editor and Placeholder.
Tutorial
Find the Right GrapesJS Plugin in Seconds: Smarter Discovery Is Live
We're shipping a set of discovery upgrades. New label filters, a proper compatibility switch for GrapesJS vs Studio, one-click and a smarter sort bar.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.