FEAT: An event to hook into before a block in dropped into the canvas
Question
WARNING
READ and FOLLOW next 3 steps, then REMOVE them before posting the issue
- Follow CONTRIBUTING Guidelines https://github.com/artf/grapesjs/blob/master/CONTRIBUTING.md
- Do a quick SEARCH first, to see if someone else didn't open the same issue
- All relative statements/questions have to be filled/answered, otherwise, the issue might be CLOSED
- JSFiddle Starter template https://jsfiddle.net/szLp8h4n
- CodeSandbox Starter template https://codesandbox.io/s/1r0w2pk1vl
What are you trying to add to GrapesJS?
Describe your feature request detailed
There is currently an event to hook into canvas:drop which gives you access to the dropped model. Before a block is dropped inside the canvas I would like to carry out some checks before it is mounted and created. So for example something like canvas:before:drop would give you access to the model before it has been mounted and created and by returning true it continues to add and mount the model, but by returning false it prevents the block from being added the canvas. This feature would be nice as I can't seem to find any other suitable event to hook into for this.
Is there an alternative at the latest version?
- Yes (describe the alternative)
- No
Is this related to an issue?
- Yes (Give a link to the issue)
- No
Answers (3)
Hi @chrisijoyah did you try using canvas:dragdata? Here an example of usage https://jsfiddle.net/artur_arseniev/87rcb24n/
Hi @chrisijoyah did you try using
canvas:dragdata? Here an example of usage https://jsfiddle.net/artur_arseniev/87rcb24n/
Does this mean I can prevent the dropped model from being added to the Canvas. Ideally I want to carry out some checks to determine if the dragged block can be dropped into a section and If it doesn't pass the checks I want to prevent that before its added. Is there a way I can do this. Can I do something like result.content= ''
or something like...
editor.on('canvas:before:drop', (model) => {
if (condition) {
return true;
}
return false;
});
Can I do something like result.content= ''
Yeah, you should be able to do that with that trick. Can you tell me more about your use case, what kind of check are you trying to perform?
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3668
BUG: Cant Reset Canvas after Moving/scaling it
WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grape...
Issue #3458
FEAT: ADD CUSTOM BLOCKS (i.e iframe) and customise it like image i.e on double click it open assets options for video link in custom iframe block
WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grape...
Issue #3364
FEAT: @How to fix container size when we are drag element inside the container,Container will be expended according to the child dragged element. How we can auto size child element according to the parent container. Container should not be expend according to the child element. It's should be show scroll.
WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grape...
Issue #3042
FEAT: Accurate Documentation on uploadFile
WARNING READ and FOLLOW next 3 steps, then REMOVE them before posting the issueFollow CONTRIBUTING Guidelines https://github.com/artf/grape...
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.