Open espenjanson opened 5 years ago
Would it be possible for you to provide some sample code for testing with?
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;
}
});
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?
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.
@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?
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.
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.
It's 2022 and this is still a thing
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?
We're having this issue as well with a block that we are developing. Has anyone figured out the root cause of this yet?
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?
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.