BUG: Drag and drop broken in 20.2
Question
GrapesJS version
- I confirm to use the latest version of GrapesJS
What browser are you using?
Chrome v108
Reproducible demo link
see below
Describe the bug
How to reproduce the bug?
- Create a custom component
export const appearBlock = {
view:{
defaults:{
tagName: 'div',
attributes: {
class: 'appear-element_view'
},
styles:`
border: 2px dashed gray
`
}
},
model: {
defaults: {
type:'appear-element',
tagName: 'div',
attributes: {
class:'appear-element'
},
styles: `
.appear-element{
display:flex;
height:50px;
width:50px;
background-color:red
}
`
}
}
}
- Add it to the editor as a component and draggable block
editor.Components.addType('appear-block', appearBlock)
editor.BlockManager.add('id-appear', {
content:{ type: 'appear-block'},
label: "Custom Appear block"
})
- Set the editor to absolute drag mode when the component added, then make the component itself absolute once it's dropped. reset the editor
editor.on('block:drag:start', (block) => {
if(block){
editor.setDragMode('absolute');
}
})
editor.on(`block:drag:stop`, (component, block) => {
if (component) {
editor.setDragMode("translate")
var res = component.setDragMode('absolute');
}
What is the expected behavior? The component stays where it is dropped (this works as expected in v 0.20.1)
What is the current behavior? The component snaps to the right side of the screen (this behaviour is new in 0.20.2)
Code of Conduct
- I agree to follow this project's Code of Conduct
Answers (3)
Confirmed it's still working in v0.20.1, so it looks like the regression was introduced in v0.20.2
The component is no longer draggable once it's added to the canvas either.
I'll prepare a fix for the next release.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #3939
BUG: Disabled drag and drop in preview
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? v95Reproducible demo link https://codesandbo...
Issue #4929
BUG: a tag inside button is removed
GrapesJS version[X] I confirm to use the latest version of GrapesJSWhat browser are you using? Chrome LatestReproducible demo link https://...
Issue #6683
BUG: Modals close on mouseup event outside of modal rather than a full click
GrapesJS version [x] I confirm to use the latest version of GrapesJS What browser are you using? Chrome 143.0.7499.169 Reproducible demo li...
Issue #5268
BUG: autoplay for youtube or vimeo doesn't work
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? Chrome v115 Reproducible demo link https:/...
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.