React DnD

React Drag and Drop library

13 flashcards · Programming Languages · by lakesare

1. What's a backend?

   What DnD api is being used (e.g. HTML5, some Js implementation based on touch events). Only the HTML5 backend comes with the library, but more may be added in the future. The backends perform a similar role to that of React's synthetic event system: they abstract away the browser differences and process the native DOM events.

2. What's an item?

   Js object describing a draggable object. E.g., { fromCell: 'C5', piece: 'queen' }

3. What's a type?

   Type is simply a string identifying a whole class of draggables in your application. The types let you specify which drag sources and drop targets are compatible. E.g., in a kanban app, there may be two types: 'List' and 'Card'.

4. What's a monitor?

   Monitor observes internal state changes (e.g. 'drag is in process'), and exposes them to you so that you can change props. const collect = (connect, monitor) => ({ })

5. What's a DragSource?

   It's a HOC you need to wrap your component in if you want it to be draggable. Every drag source is registered for a certain type, and has to implement a method producing an item from the component's props. It can also optionally specify a few other methods for handling the drag and drop events. The drag source declaration also lets you specify the collecting function for the given component.

6. What's a DropTarget?

   Like a DragSource, but a HOC to wrap a component that compatible-type stuff can be dragged into.

7. What's a DragDropContext?

   It's a HOC to wrap your app's top-level component into. lets you specify your backend lets you use DragSource and DragTarget import HTML5Backend from 'react-dnd-html5-backend'; import { DragDropContext } from 'react-dnd'; @DragDropContext(HTML5Backend) class YourApp{}

8. What's the DragSource signature?

   @DragSource(type, spec, collect) type - only the DropTarget-s registered for the same type will react spec - Js object with a few allowed methods in it. Describes how DragSource reacts to the drag and drop events. collect - (connect, monitor) => { props to inject into your component }.

9. What 2 kinds of connectors are there? How are connectors accessed?

   Connectors can be accessed as an argument to collect function for: @DragSource('List', spec, collect), or @DropTarget('List', spec, collect) const collect = (connect, monitor) => { // connect is either an instance of a DragSourceConnector, or DropTargetConnector }

10. DragSourceConnector instance is passed as an argument to @DragSource(type, spec, collect) function. Name 1 DragSourceConnector#method and how it's used.

    DragSourceConnector#dragSource() It's used to wrap a jsx in your render method that will be draggable. const collect = (connect, monitor) => ({ connectDragSource: connect.dragSource() }); @DragSource(type, spec, collect) class ComponentWithCopyEffect { render = () => this.props.connectDragSource(<div/>); });

11. What 2 kinds of monitors are there? How are monitors accessed?

    Monitors can be accessed as an argument to collect function for: @DragSource('List', spec, collect), or @DropTarget('List', spec, collect) const collect = (connect, monitor) => { // monitor is either an instance of a DragSourceMonitor, or DropTargetMonitor }

12. DragSourceMonitor instance is passed as an argument to @DragSource(type, spec, collect) function. Name 1 DragSourceMonitor#method and how it's used.

    DragSourceMonitor#isDragging(): returns true if a drag operation is in progress, and if the owner initiated the drag. const collect = (connect, monitor) => ({ isDragging: monitor.isDragging() }); @DragSource(type, spec, collect) class ComponentWithCopyEffect { render = () => this.props.isDragging ? 'a' : 'b'; });

13. @DragSource(type, spec, collect) @DropTarget(type, spec, collect) Accept spec object as a second argument. Name 1 method of spec for DragSource, and 1 for DropTarget.

    beginDrag - you MUST return a plain JavaScript object minimally describing the data being dragged. @DragSource(type, { beginDrag: (props, monitor, component) = {} }, collect) drop - callback called when a compatible item is dropped on the target. @DropTarget(type, { drop: (props, monitor, component) = {} }, collect)