How to use react-dnd - 10 common examples

style={{
          position: "relative",
          width: "100%",
          height: "100%"
        }}
      >
        
        {isOver && !canDrop && this.renderOverlay("red")}
        {!isOver && canDrop && this.renderOverlay("yellow")}
        {isOver && canDrop && this.renderOverlay("green")}
      
    );
  }
}

const DndBoardSquare = DropTarget(
  "boardsquare",
  boardSquareTarget,
  boardSquareCollect
)(BoardSquare);

(DndBoardSquare.DecoratedComponent: typeof BoardSquare);

// $ExpectError: Missing required prop
(: React.Element);

(: React.Element);

// $ExpectError: Invalid required prop
(: React.Element);

(: React.Element);

import React, { useReducer } from "react";
import { DragDropContext } from "react-dnd";
import HTML5Backend from "react-dnd-html5-backend";
import Button from "./Button";
import GraphView from "./GraphView";

const updater = (current, by) => Math.max(current + by, 0);

// This is really just to demonstrate there's no global state, and that you can
// have multiple graph views
export default DragDropContext(HTML5Backend)(() => {
  const [numGraphViews, incrementGraphViewBy] = useReducer(updater, 1);

  return (
    <>
      <button> incrementGraphViewBy(1)} title="Add Graph View" /&gt;
      </button><button> incrementGraphViewBy(-1)}
        title="Remove Graph View"
      /&gt;
      {Array.from({ length: numGraphViews }, (_, i) =&gt; (
        
      ))}
    
  );
});
</button>

static defaultProps: CustomDragLayerProps = {
    isDragging: false,
    title: ""
  };

  render() {
    const { title, isDragging } = this.props;
    if (!isDragging) {
      return null;
    }

    return <div>this.props.title</div>;
  }
}

const DndCustomDragLayer = DragLayer(dragLayerCollect)(CustomDragLayer);

(DndCustomDragLayer.DecoratedComponent: typeof CustomDragLayer);

// Test Drag Drop Context
// ----------------------------------------------------------------------

type BoardProps = {
  width: number,
  height: number
};

class Board extends React.Component {
  static defaultProps: BoardProps = {
    width: 400,
    height: 400
  };

// console.log(source.boardFeatureId, boardFeatureId);
      if (source.id !== id) {
        props.moveCard(source, {
          index: props.index,
          sprintId: props.sprintId,
          projectId: props.projectId,
        });
      }
      return props;
    },
  },
  connect => ({
    connectDropTarget: connect.dropTarget(),
  }),
)(
  DragSource(
    'card',
    {
      beginDrag: props => ({
        id: props.issue.id,
        issue: props.issue,
        index: props.index,
        sprintId: props.sprintId,
        projectId: props.projectId,
      }),
      endDrag(props, monitor) {
        const source = monitor.getItem();
        const didDrop = monitor.didDrop();
        const result = monitor.getDropResult();
        if (result) {
          const {
            dropType, teamProjectId, sprintId, index,

style={{ background: isOver ? 'rgb(240,240,240)' : 'white', position: 'relative' }}
      >
        <div style="{{">
          {storys &amp;&amp; storys.map((story, index) =&gt; )}
          {!StoryMapStore.isFullScreen &amp;&amp; }
        </div>
      
    );
  }
}

StoryColumn.propTypes = {

};

export default DropTarget(
  'story',
  {
    drop: props =&gt; ({ epic: props.epic, feature: props.feature, version: props.version }),
  },
  (connect, monitor) =&gt; ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
    // canDrop: monitor.canDrop(), //去掉可以优化性能
  }),
)(StoryColumn);

export const DragSource = ({ namespace, ...props }) => {
  const DragComponent = ReactDNDDragSource(
    namespace,
    {
      // eslint-disable-next-line no-unused-vars
      beginDrag({ children, isDragging, connectDragComponent, ...ownProps }) {
        // We return the rest of the props as the ID of the element being dragged.
        return ownProps;
      },
    },
    connect => ({
      connectDragComponent: connect.dragSource(),
    }),
  )(({ children, connectDragComponent }) => children(connectDragComponent));

  return React.createElement(DragComponent, props, props.children);
};
DragSource.propTypes = {

DropTarget,
  DragDropContext
}                                       from 'react-dnd';

import FlipMove from 'react-flip-move';
import Toggle from './Toggle.jsx';
import tiles from '../data/tiles.js';


const BOARD_WIDTH   = 11;
const BOARD_HEIGHT  = 7;
const SQUARE_SIZE   = 56;
const TILE_OFFSET   = 3;
const NUM_SQUARES   = BOARD_WIDTH * BOARD_HEIGHT;

@DragDropContext(HTML5Backend)
class Scrabble extends Component {
  constructor(props) {
    super(props);
    this.state = { tiles }

    this.updateDroppedTilePosition = this.updateDroppedTilePosition.bind(this);
    this.resetTiles = this.resetTiles.bind(this);
  }

  updateDroppedTilePosition({x, y}, tile) {
    // Normally, this would be done through a Redux action, but because this
    // is such a contrived example, I'm just passing the action down through
    // the child.

    // Create a copy of the state, find the newly-dropped tile.
    let stateTiles = this.state.tiles.slice();

>
            
            
            
            {/* TODO: Ian 2018-06-28 All main page modals will go here */}
            

            
          
        
      
    
  )
}

export default DragDropContext(MouseBackEnd)(ProtocolEditor)

function Draggable({ content, updateContent, currentView, component: Component, id, deleteComponent, index, moveCard, theme }) {
  const ref = useRef(null)
  const [, drop] = useDrop({
    accept: 'COMPONENT',
    hover(item, monitor) {
      if (!ref.current) {
        return
      }
      const dragIndex = item.index
      const hoverIndex = index
      // Don't replace items with themselves
      if (dragIndex === hoverIndex) {
        return
      }
      // Determine rectangle on screen
      const hoverBoundingRect = ref.current.getBoundingClientRect()
      // Get vertical middle
      const hoverMiddleY =
        (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2

// entire lifetime of the component
  const reference = useRef(null);

  const [{isDragging}, drag] = useDrag({
    item: {id: props.id,
           name: props.name,
           order: props.order, 
           type: ItemTypes.TWOD,
           url: props.url},
    canDrag: () => props.editMode,
    collect: (monitor) => ({
      isDragging: !!monitor.isDragging()
    })
  });

  const [, drop] = useDrop({
    accept: [ItemTypes.TWOD, ItemTypes.OBJ, ItemTypes.GLTF],
    canDrop: () => props.editMode,
    hover(item) {
      if (item.order !== props.order){
        props.onHover(item, props);
      }
    }
  });
  // Initialize drag and drop reference component
  drag(drop(reference))
  // Background-image over img tag to be able to use background-size/position
  const imageElement = (
    <div style="{{backgroundImage:" name="{props.name}"></div>