Documentation and examples about react-dnd HOT 12 CLOSED

Thanks for the great mixin, looks very useful already. My use case would require a type of dnd that is not directly based on components. My surface component renders state data from a json document to a canvas, which is on its own react-layer. A selection tool would then select a portion of the documents data through the canvas and then dynamically create a react component to render (highlight) the selected data and to provide an editor for it, on a separate foreground react-layer.

I'd then like to drag the selected composite data the dynamic editor component is referencing onto icons in a outside component. The dropped on icons then each extract specific types/aspects of data from the composite selected data. I'd also want to drag specific extracted data types back onto the canvas at specific locations and insert/merge them into the underlying document/state.

You had asked for ideas for examples so I hope this helps out. It is just the essential dnd aspects I want to convey, as far as the full implementation with the canvas and all, I'm working on it :-)

from react-dnd.

Also, it would be good to allow more than only images as a dragging indicator. In plenty of cases it is also appropriate to draw a line indicator when arranging an item up/down or as a rect when moving it from place to place. Being able to draw any geometric shape would be best, using both 2D paths or SVG options.

from react-dnd.

For now, we're limited to what HTML5 D&D API offers, but I suppose you could use canvas.toDataURL() as drag preview.

from react-dnd.

It does seem like there is a divide in understanding between the canvas and the rest of the DOM. This is why a fundamental bridge is knowing that data/state is the most important. I think we all except this.

I may use the canvas but am not at all interested in the solution you linked to (I will never be dragging chunks of a canvas around). What I'm saying is that underlying data will be selected, then that data will be dragged/dropped. So, what we want is to move data around, whether between flux stores or firebase refs.

All I'm suggesting is to put in a hook where a dynamic graphic other than a static image can be presented during the dnd. This graphic indicator can be DOM based, so no problems there. Indeed, the following SVG option would be a good way to include a robust indicator facility in react-dnd:

http://biesnecker.com/2014/10/22/using-reactjs-to-draw-dynamic-svgs/

from react-dnd.

Can you give me some idea as to how you suggest this looks in code?

Currently you can pass either Image —or— any DOM element as dragPreview, and it will work, with the same limitations that native drag and drop has: this element must be in DOM and visible on page at the time when drag starts.

What alternative API do you have in mind?

from react-dnd.

A shape type for creating a just-in-time graphic could be added to ItemTypes.js but the block type may already be good as is? However, if there is a new type it could be registered, which in turn spins off an aside function (the hook) that creates the drag indicator shape inside the components render function. The spec for the shape type indicator could all be specified in the aside function.

No sure why the SVG shape to use as a indicator would have to already be in the DOM? Would it not be the same if it was generated JIT at the start of the drag? Then cleaned up at the end of the drag?

from react-dnd.

I published some first examples: http://gaearon.github.io/react-dnd

Feedback welcome!

from react-dnd.

Just added a simple sortable example: http://gaearon.github.io/react-dnd/#/sortable-simple

This commit is literally all code needed although react-dnd doesn't have any “special” support for sortables. Just a consequence of React being a powerful view layer.

from react-dnd.

This isn't really an issue, but does concern the examples and might be useful to other novices like myself.
I'd like to deconstruct your examples in order to understand what's going on (quite a bit is over my head, still). However, I tried to bundle my changes using your webpack.config, but I get a compiling error I can't debug: The line requires 'is-array', which seems to be present in the module dependencies...

ERROR in (webpack)/~/node-libs-browser/~/buffer/index.js
Module not found: Error: Cannot resolve module 'jsx' in /usr/local/lib/node_modules/webpack/node_modules/node-libs-browser/node_modules/buffer
 @ (webpack)/~/node-libs-browser/~/buffer/index.js 10:14-33

I also tried to bundle using browserify, but it throws an exception when reaching one of the example partials where you define variables in a way I've never encountered before. Would you be so kind and explain to me the declaration of variables PropTypes and DragDropMixin? I tried to break this into defining them as empty objects, and then assigning them their given values, but to no avail.

var React = require('react'),
    ItemTypes = require('./ItemTypes'),
    { PropTypes } = React,
    { DragDropMixin } = require('react-dnd');

I don't know much of proper github etiquette, and hope this is a proper way to proceed. I thank you in advance for your help.

JPL

from react-dnd.

@jean-Phil

Module not found: Error: Cannot resolve module 'jsx' in /usr/local/lib/node_modules/webpack/node_modules/node-libs-browser/node_modules/buffer

Do you have jsx-loader in package.json (and thus node_modules)? Looks like it's missing.
This is what Webpack uses to convert JSX to JS.

If not, run

npm install --save-dev jsx-loader

Would you be so kind and explain to me the declaration of variables PropTypes and DragDropMixin?

Sure, it's just ES6 destructuring syntax. You don't have to use it, basically this snippet is the same as:

var React = require('react'),
    ItemTypes = require('./ItemTypes'),
    PropTypes = React.PropTypes,
    DragDropMixin = require('react-dnd').DragDropMixin;

It's a syntax sugar from ES6 (next version of JS). Although most browsers don't support it yet, JSX transform can transpile this syntax is you use supply harmony option. With Webpack, this would be jsx?harmony in loaders.

Please let me know if this helps!

from react-dnd.

Thank you very much, Dan. Both answers were most helpful.

from react-dnd.

Closing since we have examples now.
A much cooler Trello-like example will come with #48.

from react-dnd.