How to use the react-dnd.DragSource function in react-dnd

// 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,

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 = {

marginBottom: '0.5rem',
    cursor: 'move',
    float: 'left',
    fontSize: '12px',
    borderRadius: '10px'
};

const boxSource = {
    beginDrag(props) {
        return {
            name: props.name
        };
    }
};

@DragSource(props => props.type, boxSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging()
}))
export default class Box extends Component {
    constructor(props) {
        super(props);

        this.handleRemove = this.handleRemove.bind(this);
        this.handleClick = this.handleClick.bind(this);
    }

    static propTypes = {
        connectDragSource: PropTypes.func.isRequired,
        isDragging: PropTypes.bool.isRequired,
        name: PropTypes.string.isRequired,
        type: PropTypes.string.isRequired,

alignItems: "center",
        border: "1px solid grey",
        boxSizing: "border-box",
        backgroundColor: (isDragging) ? 'grey' : 'white',
      }}
    >
      {(title) ? title : "Detail"}
    
  )
}



Sortable = DropTarget(ItemTypes.SORTABLE, targetSpec, targetCollect)(Sortable)

Sortable = DragSource(ItemTypes.SORTABLE, sourceSpec, sourceCollect)(Sortable)

export default Sortable

if (!asset.isDisabled) {
      onClick(asset)
    }
  }

  render() {
    const { isHorizontal, asset, connectDragSource, isDragging } = this.props
    return connectDragSource(
      <div data-asset-id="{asset.id}">
        {isHorizontal ?  : }
      </div>
    )
  }
}

export default DragSource(ASSET_TYPE, assetSource, collect)(AssetCard)

monitor.getItem().index = hoverItem.index
  }
}

function dropCollect(connect, monitor) {
  return {
    connectDropTarget: connect.dropTarget()
  }
}

let Wrapped = EditContentThumb

Wrapped = DropTarget('content', dropSpec, dropCollect)(Wrapped)

Wrapped = DragSource('content', dragSpec, dragCollect)(Wrapped)

export default Wrapped

}
  render() {
    const { type, isDragging, connectDragSource } = this.props
    
    return connectDragSource(<div>)
  }
}

export const ExtraLarge = DragSource(EXTRA_LARGE, itemSource, collect)(Item)
export const Large = DragSource(LARGE, itemSource, collect)(Item)
export const Medium1 = DragSource(MEDIUM_FIRST, itemSource, collect)(Item)
export const Medium2 = DragSource(MEDIUM_SECOND, itemSource, collect)(Item)
export const Small1 = DragSource(SMALL_FIRST, itemSource, collect)(Item)
export const Small2 = DragSource(SMALL_SECOND, itemSource, collect)(Item)
export const ExtraSmall1 = DragSource(EXTRA_SMALL_FIRST, itemSource, collect)(Item)
export const ExtraSmall2 = DragSource(EXTRA_SMALL_SECOND, itemSource, collect)(Item)</div>

import React from 'react';
import PropTypes from 'prop-types';
import { DragSource } from 'react-dnd';

const nodeSource = {
  beginDrag(props) {
    return props;
  }
};

@DragSource('node-source', nodeSource, (connect, monitor) => ({
  connectDragSource: connect.dragSource(),
  isDragging: monitor.isDragging(),
}))
export class DragWrapper extends React.Component {
  static propTypes = {
    connectDragSource: PropTypes.func.isRequired,
    isDragging: PropTypes.bool.isRequired,
    children: PropTypes.node
  };

  render() {
    const { isDragging, connectDragSource, children, style } = this.props;
    const opacity = isDragging ? 0.4 : 1;

    return (
      connectDragSource(

constructor(props) {
    super(props);

    const dragSourceSpec = {
      beginDrag({ children, isDragging, connectDragComponent, ...ownProps }) {
        props.onBeginDrag();
        return ownProps;
      },
      endDrag() {
        props.onEndDrag();
      }
    };

    this.DecoratedDragComponent = reactDndDragSource(props.type, dragSourceSpec, this.dragSourceCollect)(DragComponent);
  }