|
1 | | -React DnD |
| 1 | +React *DnD* |
2 | 2 | ========= |
3 | 3 |
|
4 | 4 | [](https://gitter.im/gaearon/react-dnd?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) |
5 | 5 |
|
6 | | -Drag and drop for React with full DOM control. |
| 6 | +Drag and Drop for React. |
7 | 7 |
|
8 | | -Currently works on top of HTML5 drag-and-drop API, but is moving towards a swappable implementation. Support for touch events is on the roadmap but not currently implemented. |
| 8 | +See the docs, tutorials and examples on the website: |
9 | 9 |
|
10 | | ->**If your company uses React DnD and would like to speed up its development, consider sponsoring the project. I'm currently doing it in the spare time but I would be happy to work on it part-time. Drop me an email at <a href='mailto:[email protected]'>[email protected]</a>. Exciting new features take time.** |
11 | | -
|
12 | | -## Philosophy |
13 | | - |
14 | | -* Keep user in full control over rendering; |
15 | | -* Don't make assumptions about consuming components and their structure; |
16 | | -* Hide underlying implementation and its quirks; |
17 | | -* Make 80% easy, 20% possible. |
18 | | - |
19 | | -## Live Demo |
20 | | - |
21 | | -#### [See it in action!](http://gaearon.github.io/react-dnd/) ([Source](https://github.com/gaearon/react-dnd/tree/master/examples)) |
22 | | - |
23 | | -Demo contains a variety of things you can implement with this library, including: |
24 | | - |
25 | | -* Reacting to hover and dropping; |
26 | | -* Dropping files; |
27 | | -* Dragging a box around with snapping; |
28 | | -* Drawing a custom drag layer; |
29 | | -* Making cards sortable. |
30 | | - |
31 | | -You can do much more, but these examples will help you get started! |
32 | | - |
33 | | -## Features |
34 | | - |
35 | | -* Emits zero DOM or CSS of its own; |
36 | | -* Like original HTML5 API, emphasizes dragging data and not just “draggable views”; |
37 | | -* Support dropping files using the same API; |
38 | | -* Lets components register as “drag sources” or “drop targets” for different kinds of data; |
39 | | -* Lets a single component contain several drag sources and drop targets; |
40 | | -* Lets you provide a custom drag handle, whether DOM subnode or an image; |
41 | | -* Takes the best from HTML5 API but [hides its many quirks](http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html): |
42 | | - - doesn't require you to `preventDefault` anything to start working; |
43 | | - - emits `enter` and `leave` as you'd expect instead of doing it for every child node; |
44 | | - - lets you read drag state from `render()`; |
45 | | - - consistently fires events even if source DOM node was removed; |
46 | | -* Includes a helper to preload images for drag thumbnails; |
47 | | -* Lets you render a custom drag layer if you'd rather draw your own drag preview. |
48 | | - |
49 | | -## Documentation |
50 | | - |
51 | | -### SemVer |
52 | | - |
53 | | -We plan to follow SemVer after 1.0. Before 1.0, minor version bumps may contain breaking changes. Breaking changes will be documented in the **[Upgrade Guide](https://github.com/gaearon/react-dnd/blob/master/docs/UPGRADE_GUIDE.md)**. |
54 | | - |
55 | | -### API Reference |
56 | | - |
57 | | -Complete API reference is available **[here](https://github.com/gaearon/react-dnd/tree/master/docs/API.md)**. |
58 | | - |
59 | | -### Walkthrough |
60 | | - |
61 | | -If you don't feel comfortable diving into examples source code just yet, you can start with **[the walkthrough](https://github.com/gaearon/react-dnd/tree/master/docs/Walkthrough.md)**. |
62 | | - |
63 | | -### Examples |
64 | | - |
65 | | -Have you played with **[live demo](http://gaearon.github.io/react-dnd/)** yet? Here's **[the source code for it](https://github.com/gaearon/react-dnd/tree/master/examples)**. |
66 | | - |
67 | | -To try it locally, clone the project and run: |
68 | | - |
69 | | -``` |
70 | | -npm install |
71 | | -npm start |
72 | | -open http://localhost:8080/ |
73 | | -``` |
74 | | - |
75 | | -Examples use **[ES6 syntax](https://babeljs.io/docs/learn-es6/)** via **[Babel](https://babeljs.io/)** transpiler. You can still use React DnD in an ES5 codebase, but if you copy code from examples, make sure you translate it to ES5 where needed. |
76 | | - |
77 | | -## Installation |
78 | | - |
79 | | -The library can be used separately (`dist/ReactDND.min.js`) or with a bundler such as Webpack or Browserify. |
80 | | - |
81 | | -``` |
82 | | -npm install --save react-dnd |
83 | | -``` |
84 | | - |
85 | | -## Future Roadmap |
86 | | - |
87 | | -* Touch support; |
88 | | -* Support for mouse events instead of HTML5 drag-and-drop events; |
89 | | -* Dragging multiple items at once. |
90 | | - |
91 | | -## Production Usage |
92 | | - |
93 | | -* [Stampsy](http://stampsy.com), where it was originally developed, is using React DnD for the post editor. |
94 | | -* [Add your company!](https://github.com/gaearon/react-dnd/edit/master/README.md) |
95 | | - |
96 | | -## See Also |
97 | | - |
98 | | -* [react-draggable](https://github.com/mzabriskie/react-draggable) by [Matt Zabriskie](https://github.com/mzabriskie) |
99 | | -* [react-sortable](https://github.com/danielstocks/react-sortable) by [Daniel Stocks](https://github.com/danielstocks) |
100 | | -* [react-dropzone](https://github.com/paramaggarwal/react-dropzone) by [Param Aggarwal](https://github.com/paramaggarwal) |
101 | | - |
102 | | -## Thanks |
103 | | - |
104 | | -This library is a React port of an API, parts of which were originally written by [Andrew Kuznetsov](http://github.com/cavinsmith/). |
105 | | - |
106 | | -A lot of recent progress is due to [Nathan Hutchison](https://github.com/nelix)'s contributions and effort. |
| 10 | +http://gaearon.github.io/react-dnd/ |
0 commit comments