Custom Component dragging issue
With this you're still letting the view capturing your click events, so fix it:
Read full answer below ↓Question
This is how I've created a custom component: This is my custom block: The thing is that I have wrapped the image tag inside <a> tag when it is rendered to canvas. When I click on the element and try to drag it, only <img> tag gets dragged and <a> remains on it's original place. Live demo
Answers (3)
With this
view: {
dragstart: 'noDrag'
}
you're still letting the view capturing your click events, so fix it:
view: {
events: {
dragstart: 'noDrag'
}
}
Well, I see 2 different solutions for this case:Easy and fast, make the custom-video component not draggable, so you have to drag the parent to move it. The tiny downside is more from UX side, you force users to select the parent.More solid solution. Make the <a> element a custom component itself,...
Thanks @artf but a new problem is arising now, when I drag the custom-video-wrapper component across the canvas, custom-video isn't dragged with it, only the <a> tag is dragged.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2697
[QUESTION] Problem with custom component type and table cell
Hello! I'm trying to add custom component type: And also I'm adding new block: But when I drop this block on the canvas the <td> tag doesn'...
Issue #2777
[QUESTION] How to update styles in Style Manager
Hello. I created custom component where I set backgraound-image via custom asset manager Custom block code: Command which I run to set new...
Issue #2696
[QUESTION]: How can I create block with background image with behavior like built-in "image"?
Hello, I'm trying to create block with background image (similar to Grapedrop Image Box). I added new component like this: And also I added...
Issue #2456
[QUESTION] (Possibly a bug) How to apply traits to components used for GrapesJs initialization
I am using This works but only for blocks which are added/drag-dropped to the editor manually after it is initialized. If we supply compone...
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 →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.