Comments (17)
We managed to solve our problem this way:
import HTML5Backend from 'react-dnd-html5-backend';
import { DragDropContext } from 'react-dnd';
const ModifiedBackend = (...args) => {
const instance = new HTML5Backend(...args);
const listeners = [
'handleTopDragStart',
'handleTopDragStartCapture',
'handleTopDragEndCapture',
'handleTopDragEnter',
'handleTopDragEnterCapture',
'handleTopDragLeaveCapture',
'handleTopDragOver',
'handleTopDragOverCapture',
'handleTopDrop',
'handleTopDropCapture'
];
listeners.forEach(name => {
const original = instance[name];
instance[name] = (e, ...extraArgs) => {
if (!shouldIgnoreTarget(e.target)) {
original(e, ...extraArgs);
}
};
});
return instance;
};
// Decorate root elements with this
export default DragDropContext(ModifiedBackend);
This does however feel like a hack, and we'd prefer an official solution
from react-dnd-html5-backend.
@gaearon Is there anything I can do to help get the @agentme fork merged in? The changes look relatively straightforward, and I'm currently experiencing the pain with another file upload (via HTML5 dnd).
Is there something I'm missing or is this backend supposed to be all powerful and prevent bubbling?
Thanks!
EDIT
After taking a closer look, I understand that you may want to use DnD to handle native items, such as file upload, which is why the original code exists. It seems unlikely that the inclusion of a feature that ignores some items would be included (perhaps an option, though).
I decided to take a look at what @agentme did in his fork and built a "local" non-native backend in our application.
Here is what I ended up doing: https://gist.github.com/nickpresta/eb5cce69d650db4c2795
from react-dnd-html5-backend.
This behaviour causes our CodeMirror instance to ignore drag and drop, it does nothing when e.defaultPrevented === true
. Is a fork the way to go? Is this a perma-issue?
from react-dnd-html5-backend.
I also had this issue. Mounting a DragDropContext
component anywhere rendered useless all the onDragOver
, onDragStart
and onDragStop
listeners I had on my other components.
What worked in my particular situation is, basing on @awestroke's hack, to disable preventDefault
for just the handleTopDragStart
listener:
const ModifiedBackend = (...args) => {
const instance = new HTML5Backend(...args);
const original = instance.handleTopDragStart;
instance.handleTopDragStart = (e, ...extraArgs) => {
e.preventDefault = () => {};
original(e, ...extraArgs);
};
return instance;
};
from react-dnd-html5-backend.
Please cut an issue in the main repository. If you have a fix ready, feel free to cut a PR and tag me to review it
from react-dnd-html5-backend.
I'm currently facing a similiar problem, so thanks @agentme for providing a fork with npm packages! However, it doesn't quite fix my problem and I'm trying to figure out what's going wrong.
In HTML5Backend.prototype.handleTopDropCapture
, you have the following code which will prevent the backend from calling event.preventDefault()
:
if (!this.monitor.isDragging()) {
// This is probably a native item type we don't understand.
return;
}
However, in my case this.monitor.isDragging()
always returns true, because react-dnd will just treat my non-react draggable element as a native draggable. How can I actually prevent this from happening? Is there something I'm missing here?
from react-dnd-html5-backend.
because react-dnd will just treat my non-react draggable element as a native draggable
Are those terms not synonymous here?
from react-dnd-html5-backend.
Actually, yes, I was not making the distincion clear enough. I have non-react draggables that should not be processed by react-dnd, which is what I understand your fork is designed for. However, react-dnd will recognize my draggables as native draggables and then try to process them anyway (because, apparently, you can drag non-react stuff into react-dnd containers), which will cause monitor.isDragging()
to return true, which will cause the above check to fail, which will in turn call event.preventDefault()
on the drop event for those draggables, which prevents CKEditor from processing them correctly.
To restate my question: If I want to keep react-dnd from not blocking other dnd operations, is there anything else I have to do besides switching to your fork? Like, calling event.stopPropagation()
on the dragstart
event of the draggables?
from react-dnd-html5-backend.
Oh, the issue is that I only needed and tested that this allows files to be dragged into the browser onto non-React-DnD dropzones. I didn't test draggable non-React-DnD elements. More changes will be needed to support that which I haven't looked into.
from react-dnd-html5-backend.
Ok, good to know. I think I'll have a go tomorrow.
from react-dnd-html5-backend.
So, I tried if I can keep monitor.isDragging()
from returning true
by stopping drag events from bubbling from the CKEditor, but this didn't work.
I ended up using the vanilla HTML5 backend, preventing all drag events from bubbling and monkeypatching HTML5Backend.handleTopDropCapture()
to only run when the dragged element is not one of my native draggables inside the CKEditor.
It would be really nice to have a better way of doing this, but I can't figure anything out right now since I don't really understand the internal architecture of the backend. I think one possibility might be to just never call event.preventDefault()
when the drag event doesn't get handled by react-dnd, but I'm not certain which consequences this entails.
from react-dnd-html5-backend.
+1 for @agentme's original sentiment here. We're using AlloyEditor (a React component based on CKEditor as well) in conjunction with React-DnD in a project side-by-side and I noticed that React-DnD was somewhat greedily clobbering our ability to drag-and-drop images into the editor.
@agentme's fork fixed this for me (thanks!), but it would be great if this were an option of some sort in the official supported project as well.
from react-dnd-html5-backend.
I think merging my fork would make sense if the issue @fixpunkt brought up was fixed: my fork leaves non-DnD draggable items broken.
from react-dnd-html5-backend.
@agentme thanks for this! Super helpful
from react-dnd-html5-backend.
What is the status of this issue?
Should I switch to the fork provided by @agentme? or the gist that @nickpresta shared?
from react-dnd-html5-backend.
@angelikatyborska Where would this function sit? <---- Stupid question. I neglected to read. ;)
from react-dnd-html5-backend.
@darthtrevino @gaearon This repo is apparently deprecated and the code moved into react-dnd, but as far as I'm aware this is still open. This issue has been around for 1.5 years without even being commented on by any core contributors. IMO this is a pretty serious issue in a project that's still getting 375+ downloads a month.
How should this issue be moved forward: should a new issue be opened in react-dnd
; is this not even on the roadmap for react-dnd; or is this project even being maintained?
from react-dnd-html5-backend.
Related Issues (20)
- File drop in Firefox doesn't always work HOT 2
- Malfunctioning in Chrome on Windows
- Issue with drag preview and child components
- valid/invalid Drag icon bug HOT 2
- Documentation on the HTML5 Backend HOT 1
- Delegate to existing backend instead of throwing new Error('Cannot have two HTML5 backends at the same time.'); HOT 4
- Incorrect preview on Chrome after drag-scrolling page
- TypeError: target.addEventListener is not a function HOT 1
- Chrome crashes when dragging a react-dnd enabled div containing a complex material-ui table HOT 2
- Support native html5 dropEffect HOT 1
- Preview position wrong with absolute positioned elements inside DragSource
- Update to Babel 6
- Use eslint-config-airbnb
- Write some tests
- Drop doesn't work in chromium webview elements HOT 3
- Error in console after build using babel presets latest
- Dragging plain text in Firefox gives a 'Permission denied to access property "types"' error. HOT 1
- IE 11 freezes when dragging around HOT 1
- How to use this module after the change to the monorepo? HOT 2
- Dragging really slow because of HitTest. Disable hit testing on drag? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-dnd-html5-backend.