Comments (25)
For those who come after me, here seems to be the path forward https://github.com/LouisBrunner/react-dnd-multi-backend
from react-dnd.
I haven't used any of these on projects but Googling found:
- http://interactjs.io/
- http://draggabilly.desandro.com/
- https://github.com/dbushell/Nestable
- https://github.com/a5hik/ng-sortable
from react-dnd.
FYI: https://github.com/yahoo/react-dnd-touch-backend.
from react-dnd.
Indeed! I'll look into this next week.
from react-dnd.
I did something like this using pointer-events: none; so the elements under the item being dragged could catch mouse over events; i'm interested in seeing what other ways there are to tackle this
from react-dnd.
What are state-of-the-art drag and drop libraries using touchmove? jQuery UI? We need to look at a good solution and adopt its tricks.
from react-dnd.
I think it would be best and in the spirit of this library to avoid any DOM manipulation (like popular libs do, whether by cloning node for preview, changing its translateX/Y, etc), and instead let the consumer draw "drag layer" and give consumer necessary data for this.
In other words if Card
component is dragged with touch backend, react-dnd won't try to somehow move it itself. It's up to you to render some "layer" component at the top of your app. This component will use DragLayerMixin
provided by react-dnd to learn about current element, its position, etc. It decides how to render the dragged item based by its type and is 100% React as well.
var App = React.createClass({
render() {
return (
<div>
{this.props.activeRouteHandler />
<DragDropLayer />
</div>
);
}
});
var { DragLayerMixin } = require('react-dnd');
var DragDropLayer = React.createClass({
mixins: [DragLayerMixin],
render() {
// With non-native dragging backend, rendering items in the process of dragging is your responsibility.
// It's up to you to use translate3d or top/left, render thumbnails or real components, etc.
var {
draggedItem,
draggedItemType,
clientX,
clientY
} = this.getDragLayerState(); // provided by mixin
if (!draggedItem) {
return null;
}
return (
<div style={{zIndex: 10000, pointerEvents: 'none', position: 'absolute'}}>
{draggedItem &&
<div style={{transform: `translate3d(${clientX}, ${clientY}, 0)`}}>
{this.renderItem(draggedItemType, draggedItem)}
</div>
}
</div>
);
},
renderItem(type, item) {
// It's completely up to the consumer to specify how to render different types
switch (type) {
case ItemTypes.Card:
return <Card title={item.title} />;
case ItemTypes.List:
return <img src='thumbnail.jpg' />;
}
});
from react-dnd.
BTW this approach opens up really cool possibilities because for some apps drag layer is what contains draggable items. Drag layer doesn't have to be separate, although it can, if neccessary.
For apps where items are dragged upon some container, this container can use DragLayerMixin
and thus learn about current drag position and move real elements as drag occurs:
For apps such as Trello where items are dragged across the screen across different containers, it can be useful to have a separate top-level component using DragLayerMixin
to render absolutely positioned currently dragged item.
from react-dnd.
This makes a lot of sense. Almost any browser, whether desktop or mobile, should be able to smoothly animate an item around the screen. This would make it easy then to add cool 3d effects like Trello does when moving a card.
from react-dnd.
This would also allow setting the mouse cursor while dragging and more flexible placeholder rendering... Things you can't really do with the native DND api
from react-dnd.
I just realized we can also make this "drag layer" API available for browser D&D API. Just set dragImage
to a transparent pixel like in this example and draw whatever you want.
from react-dnd.
I have a proof of concept here: http://gaearon.github.io/react-dnd/#/drag-around-experimental
It will blink while you move it :-) (won't work in Firefox yet)
Relevant source code:
https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/Box.js#L69
As you can see, it's up to the consumer to draw drag layer and components on it, so it's really flexible.
I'll try to finish this up this week as a stepping stone to touch support, and after that it shouldn't be difficult to do the same for touch mode.
from react-dnd.
We use a drag layer much like this, but we use onMouseMove etc so that you can change the mouse cursor...
A minor but very important concern for us. It also allows use to use mostly the same code for touch and pointer events.
Still the DragLayer stuff is a step in the right direction for me, once you do touch support I'd be willing to try and extend that to support pointer and mouse events if you are interested in having those as features?
from react-dnd.
I'd like to have HTML5 D&D API as the default backend and then make touch-based/mousemove-based backends opt-in.
HTML5 D&D would be the simplest one (no need for drag layer, everything managed by browser). Opting in to mousemove/touchmove ones would require you to implement a drag layer to draw whatever you like.
Makes sense?
from react-dnd.
Sure does, thats what I hoped would happen.
HTML5 D&D is fast and (besides the quirks) pretty simple to use so its the obvious choice by default.
from react-dnd.
So I just had a request to make this drag and drop touch enabled. Has anyone done this and want to share tips?
from react-dnd.
@nelix started work on mousemove
backend, we'll do touchmove
backend after that.
You can look at work in progress here: nelix@8de7f7f (it's still far from being done and doesn't really work at this point). We still need to figure out which parts stay in DragDropMixin
and which need to be moved into backends/HTML5
(and other backends).
If you'd like to work on that, you can start with that commit and keep implementing mousemove backend. When it works, it shouldn't be hard to implement a similar touchmove backend.
from react-dnd.
Please, if you'd like to work on this, keep us updated here or in Gitter room, so we don't end up with two implementations.
from react-dnd.
Here's a proof of concept of touch support: #143
You can play with it: http://rawgit.com/gaearon/react-dnd/touch-poc/examples/index.html
It uses HTML5 backend on desktop and touch backend on mobile.
Only custom rendering example will show a drag preview on mobile.
from react-dnd.
This seems quite promising! Any ideas on when this might land? :)
from react-dnd.
I'm currently busy with another project and will be until July.
I might be able to work on this somewhere in July or August, but I'll be happy if somebody beats me to it :-)
from react-dnd.
since 1.1 was mentioned in this thread and v1.1.4 is out. I'm just wondering if the proof of concept above is already included in 1.1.4?
from react-dnd.
Nope.
I shouldn't have used a precise version number cause you never know when you're going to bump :-)
I currently don't have time to work on this but the proof of concept is in the PR. I'll probably update the PR to reflect the current API and wait for somebody to actually implement it.
from react-dnd.
Let's continue the discussion in #240.
from react-dnd.
I wrote this snippet:
function multiBackends(...backendFactories) {
return function(manager) {
const backends = backendFactories.map(b => b(manager));
return {
setup: (...args) =>
backends.forEach(b => b.setup.apply(b, args)),
teardown: (...args) =>
backends.forEach(b => b.teardown.apply(b, args)),
connectDropTarget: (...args) =>
backends.forEach(b => b.connectDropTarget.apply(b, args)),
connectDragPreview: (...args) =>
backends.forEach(b => b.connectDragPreview.apply(b, args)),
connectDragSource: (...args) =>
backends.forEach(b => b.connectDragSource.apply(b, args)),
};
};
}
Which I use like this:
DragDropContext(multiBackends(
ReactDnDHTML5Backend,
ReactDnDTouchBackend,
))
react-dnd-html5-backend
and react-dnd-touch-backend
listen to a disjoint set of events. (dragstart, dragend, dragenter, dragleave dragover, and drop vs touchstart, touchend and touchmove).
Some basic testing and it works fine, my drag and drop now supports touch and mouse events at the same time.
Are there any reasons it wouldn't work?
from react-dnd.
Related Issues (20)
- Incompatibility with REACT 18 HOT 6
- Iframe examples don't work on Chrome when using Codepen / CodeSandbox / etc (multiple iframes issue?)
- Feature request: api to get modifier keys when drag starts
- HTML Backend leaks event listeners to all elements on page, not just those within Context
- Parent component's native events affect react-dnd HOT 3
- dropEffect move doesn't work!
- react-dnd does not work on chrome android even with touch backend HOT 1
- Multiple select, then drag and drop HOT 2
- canDrop invoked permanently?
- Drag doesn't work after focusing password input
- Not working in parent with modal styling { top: 50%, left: 50%, transform: translate(-50%, -50%) } HOT 2
- Examples using React Class Components
- Preview is not working for the first drag HOT 2
- please keyboard functionality
- Preview Image only works once, on the first drag. HOT 3
- Uncaught Invariant Violation: Expected an existing source.
- Library breaks textareas, inputs etc. HOT 1
- table 拖拽时 使用最新版本的React-dnd Api时 出现node.addEventListener is not a function
- 拖动时useDrag无法访问组件内的变量 HOT 1
- @react-dnd/asap trigger swc error `env` and `jsc.target` cannot be used together
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.