Issue #4792Opened December 19, 2022by wunksert0 reactions

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?

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

            `
        }
    }
}

  1. 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"
})
  1. 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)

wunksertDecember 19, 20220 reactions

Confirmed it's still working in v0.20.1, so it looks like the regression was introduced in v0.20.2

wunksertDecember 19, 20220 reactions

The component is no longer draggable once it's added to the canvas either.

artfDecember 20, 20220 reactions

I'll prepare a fix for the next release.

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

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.