More docs

docs/02 Connecting to DOM/DragSourceConnector.md

@@ -3,15 +3,11 @@
 DragSourceConnector
 ===================
 
-`DragSourceConnector` is an object passed to a collecting function of [`DragSource`](/docs-drag-source.html). Its methods return functions that let you assign the roles to your component's DOM nodes.
-
-### Signature
-
-Call the `DragSourceConnector` methods inside your *collecting function*. When the returned functions are passed to your component as props, you can indicate the DOM node roles by using them inside the `render` function or the lifecycle hooks. Internally they work by attaching a [callback ref](https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute) to the React elements you give them. These callbacks connect the DOM nodes of your component to the chosen DnD backend.
+`DragSourceConnector` is an object passed to a collecting function of the [`DragSource`](/docs-drag-source.html). Its methods return functions that let you assign the roles to your component's DOM nodes.
 
 ### Methods
 
-The functions returned by the connector methods need to be applied inside the component. Normally you can just call them inside `render`, and they will return the clones of your React elements with the backend event handlers attached. You may also call them in the lifecycle methods such as `componentDidMount` with arbitrary DOM nodes.
+Call the `DragSourceConnector` methods inside your *collecting function*. This will pass the returned functions to your component as props. You can then use them inside `render` or `componentDidMount` to indicate the DOM node roles. Internally they work by attaching a [callback ref](https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute) to the React elements you give them. These callbacks connect the DOM nodes of your component to the chosen DnD backend.
 
 * **`dragSource() => (elementOrNode, options?)`**: Returns a function that must be used inside the component to assign the drag source role to a node. By returning `{ connectDragSource: connect.dragSource() }` from your collecting function, you can mark any React element as the draggable node. To do that, replace any `element` with `this.props.connectDragSource(element)` inside the `render` function.
 

docs/02 Connecting to DOM/DropTargetConnector.md

@@ -3,15 +3,11 @@
 DropTargetConnector
 ===================
 
-`DropTargetConnector` is an object passed to a collecting function of [`DropTarget`](/docs-drop-target.html). Its only method `dropTarget()` returns a function that lets you assign the drop target role to one of your component's DOM nodes.
-
-### Signature
-
-Call the `DropTargetConnector`'s `dropTarget()` method inside your *collecting function*. When the returned function is passed to your component as a prop, you can indicate that a DOM node should act as a drop target by using that function inside your `render` function. Internally it works by attaching a [callback ref](https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute) to the React element you give it. This callback connects the DOM node of your component to the chosen DnD backend.
+`DropTargetConnector` is an object passed to a collecting function of the [`DropTarget`](/docs-drop-target.html). Its only method `dropTarget()` returns a function that lets you assign the drop target role to one of your component's DOM nodes.
 
 ### Methods
 
-The function returned by the `dropTarget()` connector method needs to be applied inside the component's `render` method. It will return the clone of your React element with the backend event handlers attached.
+Call the `DropTargetConnector`'s `dropTarget()` method inside your *collecting function*. This will pass the returned function to your component as a prop. You can then use it inside `render` or `componentDidMount` to indicate a DOM node should react to drop target events. Internally it works by attaching a [callback ref](https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute) to the React element you give it. This callback connects the DOM node of your component to the chosen DnD backend.
 
 * **`dropTarget() => (elementOrNode)`**: Returns a function that must be used inside the component to assign the drop target role to a node. By returning `{ connectDropTarget: connect.dropTarget() }` from your collecting function, you can mark any React element as the droppable node. To do that, replace any `element` with `this.props.connectDropTarget(element)` inside the `render` function.
 

docs/03 Monitoring State/DragLayerMonitor.md

@@ -1,6 +1,24 @@
 *New to React DnD? [Read the overview](/docs-overview.html) before jumping into the docs.*
 
-DragDropMonitor
+DragLayerMonitor
 ===================
 
-Wow
+`DragLayerMonitor` is an object passed to a collecting function of the [`DragLayer`](/docs-drag-layer.html). Its methods let you get information about the global drag state.
+
+### Methods
+
+* **`isDragging()`**: Returns `true` if a drag operation is in progress. Returns `false` otherwise.
+
+* **`getItemType()`**: Returns a string or an ES6 symbol identifying the type of the current dragged item. Returns `null` if no item is being dragged.
+
+* **`getItem()`**: Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its `beginDrag()` method. Returns `null` if no item is being dragged.
+
+* **`getInitialClientOffset()`**: Returns the `{ x, y }` client offset of the pointer at the time when the current drag operation has started. Returns `null` if no item is being dragged.
+
+* **`getInitialSourceClientOffset()`**: Returns the `{ x, y }` client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns `null` if no item is being dragged.
+
+* **`getClientOffset`**: Returns the last recorded `{ x, y }` client offset of the pointer while a drag operation is in progress. Returns `null` if no item is being dragged.
+
+* **`getDifferenceFromInitialOffset()`**: Returns the `{ x, y }` difference between the last recorded client offset of the pointer and the client offset when current the drag operation has started. Returns `null` if no item is being dragged.
+
+* **`getSourceClientOffset()`**: Returns the projected `{ x, y }` client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns `null` if no item is being dragged.

docs/03 Monitoring State/DragSourceMonitor.md

@@ -3,4 +3,28 @@
 DragSourceMonitor
 ===================
 
-Wow
+`DragSourceMonitor` is an object passed to a collecting function of the [`DragSource`](/docs-drag-source.html). Its methods let you get information about the drag state of a specific drag source. The specific drag source bound to that monitor is called the monitor's *owner* below.
+
+### Methods
+
+* **`canDrag()`**: Returns `true` if no drag operation is in progress, and the owner's `canDrag()` is either not defined, or returns `true`.
+
+* **`isDragging()`**: Returns `true` if there is a drag operation is in progress, and either the owner initiated the drag, or its `isDragging()` function is either not defined, or returns `true`.
+
+* **`getItemType()`**: Returns a string or an ES6 symbol identifying the type of the current dragged item. Returns `null` if no item is being dragged.
+
+* **`getItem()`**: Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its `beginDrag()` method. Returns `null` if no item is being dragged.
+
+* **`getDropResult()`**: Returns a plain object representing the last recorded drop result. Some drop targets may optionally specify it by returning an object from their `drop()` methods. When a chain of `drop()` is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from `drop()` overrides the child drop result. Returns `null` if called before the first target's `drop()` is dispatched, or after the source's `endDrag` is dispatched.
+
+* **`didDrop()`** Returns `true` if any drop target has received the drop event. Even if a target did not return a drop result, `didDrop()` will return `true`. Returns `false` if no targets have received a `drop()` event. Also returns `false` if called before the first target's `drop()` is dispatched, or after the source's `endDrag` is dispatched.
+
+* **`getInitialClientOffset()`**: Returns the `{ x, y }` client offset of the pointer at the time when the current drag operation has started. Returns `null` if no item is being dragged.
+
+* **`getInitialSourceClientOffset()`**: Returns the `{ x, y }` client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns `null` if no item is being dragged.
+
+* **`getClientOffset`**: Returns the last recorded `{ x, y }` client offset of the pointer while a drag operation is in progress. Returns `null` if no item is being dragged.
+
+* **`getDifferenceFromInitialOffset()`**: Returns the `{ x, y }` difference between the last recorded client offset of the pointer and the client offset when current the drag operation has started. Returns `null` if no item is being dragged.
+
+* **`getSourceClientOffset()`**: Returns the projected `{ x, y }` client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns `null` if no item is being dragged.

docs/03 Monitoring State/DropTargetMonitor.md

@@ -3,4 +3,28 @@
 DropTargetMonitor
 ===================
 
-Eh
+`DropTargetMonitor` is an object passed to a collecting function of the [`DropTarget`](/docs-drop-target.html). Its methods let you get information about the drag state of a specific drop target. The specific drop target bound to that monitor is called the monitor's *owner* below.
+
+### Methods
+
+* **`canDrop()`**: Returns `true` if no drag operation is in progress, and the owner's `canDrop()` is either not defined, or returns `true`.
+
+* **`isOver(options)`**: Returns `true` if there is a drag operation is in progress, and the pointer is currently hovering over the owner. You may optionally pass `{ shallow: true }` to strictly check whether *only* the owner is being hovered, as opposed to a nested target.
+
+* **`getItemType()`**: Returns a string or an ES6 symbol identifying the type of the current dragged item. Returns `null` if no item is being dragged.
+
+* **`getItem()`**: Returns a plain object representing the currently dragged item. Every drag source must specify it by returning an object from its `beginDrag()` method. Returns `null` if no item is being dragged.
+
+* **`getDropResult()`**: Returns a plain object representing the last recorded drop result. Some drop targets may optionally specify it by returning an object from their `drop()` methods. When a chain of `drop()` is dispatched for the nested targets, bottom up, any parent that explicitly returns its own result from `drop()` overrides the child drop result. Returns `null` if called before the first target's `drop()` is dispatched, or after the source's `endDrag` is dispatched.
+
+* **`didDrop()`** Returns `true` if any drop target has received the drop event. Even if a target did not return a drop result, `didDrop()` will return `true`. Returns `false` if no targets have received a `drop()` event. Also returns `false` if called before the first target's `drop()` is dispatched, or after the source's `endDrag` is dispatched.
+
+* **`getInitialClientOffset()`**: Returns the `{ x, y }` client offset of the pointer at the time when the current drag operation has started. Returns `null` if no item is being dragged.
+
+* **`getInitialSourceClientOffset()`**: Returns the `{ x, y }` client offset of the drag source component's root DOM node at the time when the current drag operation has started. Returns `null` if no item is being dragged.
+
+* **`getClientOffset`**: Returns the last recorded `{ x, y }` client offset of the pointer while a drag operation is in progress. Returns `null` if no item is being dragged.
+
+* **`getDifferenceFromInitialOffset()`**: Returns the `{ x, y }` difference between the last recorded client offset of the pointer and the client offset when current the drag operation has started. Returns `null` if no item is being dragged.
+
+* **`getSourceClientOffset()`**: Returns the projected `{ x, y }` client offset of the drag source component's root DOM node, based on its position at the time when the current drag operation has started, and the movement difference. Returns `null` if no item is being dragged.

docs/04 Backends/HTML5.md

@@ -3,4 +3,54 @@
 HTML5
 ===================
 
-Ouch
+This is the only backend currently shipping with React DnD. It uses [the HTML5 drag and drop API](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Drag_and_drop) under the hood and hides [its quirks](quirksmode.org/blog/archives/2009/09/the_html5_drag.html).
+
+### Importing
+
+* In the UMD build it is available as `ReactDnD.HTML5`;
+* In the CommonJS build, you can import it from `react-dnd/modules/backends/HTML5`.
+
+### Extras
+
+Aside from the default export, `HTML5` module also provides a few extras:
+
+* **`getEmptyImage()`**: a function returning a transparent empty [`Image`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image). Use `connect.dragPreview()` of the [DragSourceConnector](/docs-drag-source-connector.html) to hide the browser-drawn drag preview completely. Handy for drawing the [custom drag layers with `DragLayer`](/docs-drag-layer.html). Note that the custom drag previews don't work in IE.
+
+* **`NativeTypes`**: an enumeration of two constants, `NativeTypes.FILE` and `NativeTypes.URL`. You may register the [drop targets](/docs-drop-target.html) for these types to handle the drop of the native files and URLs.
+
+### Usage
+
+-------------------
+```js
+var HTML5Backend = require('react-dnd/modules/backends/HTML5');
+var DragDropContext = require('react-dnd').DragDropContext;
+
+var YourApp = React.createClass(
+  /* ... */
+);
+
+module.exports = DragDropContext(HTML5Backend)(YourApp);
+```
+-------------------
+```js
+import HTML5Backend from 'react-dnd/modules/backends/HTML5';
+import { DragDropContext } from 'react-dnd';
+
+class YourApp {
+  /* ... */
+}
+
+export default DragDropContext(HTML5Backend)(YourApp);
+```
+-------------------
+```js
+import HTML5Backend from 'react-dnd/modules/backends/HTML5';
+import { DragDropContext } from 'react-dnd';
+
+@DragDropContext(HTML5Backend)
+export default class YourApp {
+  /* ... */
+}
+```
+-------------------
+