Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Drag and drop doesn’t work with SVG elements #395
I'm trying to create a network editor with react. I would like to drag and drop svg circles like d3js.
I cloned the repository and begin from the "Naive Drag Around" example.
On firefox 38.0.5, I can drag these circles. However, after dragging the first circle, I have to CLICK first on the second circle. Then I can drag the second one. It seems like it activates the future dragging when I click on it.
On Chrome Version 48.0.2564.116 (64-bit), it was possible to drag the node sometimes (the circles weren't reacting everytime, I should click somewhere randomly on the svg before dragging) when I was in ES7 format. After encoding to ES6, the dragging doesn't work.
I've rendered first my GraphEditor where I wrapped the DragDropContext.
Then I got my svgContainer where I Wrapped as my DropTarget.
Inside this svgContainer, I got 2 elements in which I got one wrapped as a DragSource
Is it how I've written the code or the SVG elements which could not work with react-dnd?
I found some issues with svg and react facebook/react#3192
where does my random circles dragging come from ?
Can you please share a complete project reproducing the issue? Otherwise it’s hard to guess what went wrong.
Are there any errors in the console?
There can be no difference in behavior between using ES6 or decorators. If there is a difference it means there is a mistake in the ES6 code.
To be honest I wouldn’t be surprised if HTML5 drag and drop API (which is what https://github.com/gaearon/react-dnd-html5-backend uses under the hood) doesn’t work well with SVG elements. Try replacing them with
No error... I just log in the console when I drag the circle and this log doesn't appear when I click for the first time ("to activate it")
When I cloned the example from Github where you got div inside, it works perfectly. No problem with my browser.
Yep, apparently HTML5 drag and drop API doesn’t work on SVG elements.
So you can either use React DnD with a custom backend a la https://github.com/yahoo/react-dnd-touch-backend/ (except you’d handle