how can I move a component by dragging?

[rozek]

I would like to make a component draggable.

According to issue #710 the following code

    Editor.on('component:selected', () => {
      const selectedComponent = Editor.getSelected()
      if (selectedComponent.get('draggable') == true) {
        let selectedElement = selectedComponent.view.el

        selectedElement._hasCustomEvent = 1
        selectedElement.addEventListener(
          'mousedown', (Event) => {
console.log('moving',selectedElement)
            Editor.runCommand('tlb-move', { event:Event })
          }
        )
      }
    })

should work, but it doesn't (although console output shows that Editor.runCommand has been called). Dragging with the help of the toolbar button does not work either.

The component's block has been defined with

        model: {
          defaults: {
            resizable: true,
            draggable: true,

Is there anything else I should consider in order to make a component moveable by dragging?

[rozek]

Ok, I found the solution - although it wasn't obvious:

Simply add dragMode:'absolute', to grapesjs.init like so:

    let Editor = grapesjs.init({
      dragMode:'absolute',
      ...
    })

and you're done!