Draggable does not work inside block editor

[espenjanson]

Describe the bug
Draggable prop does not work on elements within the editor block, ex: I am build a hero-block where the user should be able to move the text around to his / her pleasing. Nothing happens when I try to drag.

To Reproduce
Use the draggable prop on any element in a project that is not Gutenberg-based and you will be able to drag that element around. Do the same thing in a Gutenberg block editor and it will not work.

Expected behavior
Should be able to drag content around inside Gutenberg block editor.

[designsimply]

Would it be possible for you to provide some sample code for testing with?

[espenjanson]

Absolutely!

In newly started project with create-react-app:

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />

          // This <p> is not draggable by default, but now drags as expected

          <p draggable>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

Drags as expected (I have no handler for the drag but the items is draggable).

In my gutenberg block:

export default registerBlockType("mona/monas-draggable", {
  attributes: {
    blockAlignment: {
      type: "string",
      default: "wide"
    }
  },
  category: "common",
  getEditWrapperProps({ blockAlignment }) {
    return { "data-align": blockAlignment };
  },
  icon: "slides",
  title: "Mona's draggable",
  edit() {
    return (
      <div style={{ backgroundColor: "yellow", height: "300px" }}>

       // This p should be draggable - it is not

        <p draggable>hello from me</p>
      </div>
    );
  },
  save() {
    return null;
  }
});

[espenjanson]

I think we are talking about different things here. The draggable prop is applicable to any element in JSX (and plain HTML as draggable="true" since it is a feature of HTML5) and just makes the item draggable, so it should work in all cases. Anyway, for what it's worth I already tried the Draggable component and it does not work either. Did you get it to work with the Draggable component?

See https://www.w3schools.com/tags/att_global_draggable.asp

[youknowriad]

I think the drag events are probably prevented in the upper tree (block wrapper). That said, I feel you should be able to attach a custom onDragStart/onDragEnd events like the Draggable component does in order to make it work.

[brentjett]

@youknowriad unfortunately no, it appears that currently (7.8.1) onDragStart handler will fire, but onDrag and onDragEnd do not. Can we find a better way to do whatever is happening in the block wrapper that doesn't disable the HTML5 drag and drop API?

[mikethicke]

The documentation in the Block Editor Handbook should probably state that this doesn't work in the editor. The example given works in <InspectorControls> but not in the editor. I spent some time banging my head against the wall on this one today.

[SourceNova]

Wow this just cost me a lot of time, this should really throw some JS errors or even better, it should be fixed, so that DND works... Has someone found a workaround for this? At the moment i am trying to use the touch backend of react-dnd with click events enabled because it does not use html5 dnd API, but this does only work partially. Any Help would be apreciated, thx.

[w33zy]

It's 2022 and this is still a thing

[loopmasta]

It's 2022 and this is still a thing

I did run into the same problem today. HTML5 D&D API does not work within the Gutenberg Block editor. Is this a bug or by design?

[arnaudbroes]

We're having this issue as well with a block that we are developing. Has anyone figured out the root cause of this yet?

[renatho]

It happens because of this event: https://github.com/WordPress/gutenberg/blob/v13.8.1/packages/block-editor/src/components/block-list/use-block-props/use-selected-block-event-handlers.js#L85

Based on the hook documentation, I think it's on purpose. Maybe it's there to avoid some issue?