react-dnd#DragSource JavaScript Examples

The following examples show how to use react-dnd#DragSource. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: Item.js    From wix-style-react with MIT License 6 votes vote down vote up 
DragItemSource = DragSource(
  itemTypes.nestedItem,
  cardSource,
  (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isPlaceholder: monitor.isDragging(),
  }),
)(Item)
Example #2
Source File: tableDrag.js    From camel-store-admin with Apache License 2.0 6 votes vote down vote up 
DragableBodyRow = DropTarget(
  'row',
  rowTarget,
  (connect, monitor) => ({
    connectDropTarget: connect.dropTarget(),
    isOver: monitor.isOver(),
  }),
)(
  DragSource(
    'row',
    rowSource,
    (connect) => ({
      connectDragSource: connect.dragSource(),
    }),
  )(BodyRow),
)
Example #3
Source File: MetaColumnsTable.js    From hzero-front with Apache License 2.0 6 votes vote down vote up 
DragableBodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  isOver: monitor.isOver(),
  sourceClientOffset: monitor.getSourceClientOffset(),
}))(
  DragSource('row', rowSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    dragRow: monitor.getItem(),
    clientOffset: monitor.getClientOffset(),
    initialClientOffset: monitor.getInitialClientOffset(),
  }))(BodyRow)
)
Example #4
Source File: createDrawDragField.js    From hzero-front with Apache License 2.0 5 votes vote down vote up 
export default function createDrawDragField({
  dragType = DragType.drawDragField,
  canDrag = defaultCanDrop,
  beginDrag = defaultBeginDrag,
  dropField = createDropField(),
} = {}) {
  const drawDragFieldSpec = {
    beginDrag,
    canDrag,
  };
  const drawDragFieldCollect = (connect, monitor) => {
    const connectDragSource = connect.dragSource();
    const isDragging = monitor.isDragging();
    return {
      connectDragSource,
      isDragging,
    };
  };
  const DropField = dropField;

  @DragSource(dragType, drawDragFieldSpec, drawDragFieldCollect)
  class DrawDragField extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};
    }

    render() {
      const {
        // drag
        connectDragSource,
        isDragging,
        // addon options
        fieldOptions,
        currentEditField,
        component = {},
        pComponent,
        children,
        onSwapField,
        onAddField,
        onActiveField,
      } = this.props;

      const drawDragFieldClassName = [styles['draw-drag-field']];

      return isDragging ? (
        <div className={`${styles['draw-drag-field']} ${styles['draw-drag-field-dragging']}`}>
          <div style={{ visibility: 'hidden' }}>{children}</div>
        </div>
      ) : (
        connectDragSource &&
          connectDragSource(
            <div className={drawDragFieldClassName.join(' ')}>
              <DropField
                pComponent={pComponent}
                component={component}
                onSwapField={onSwapField}
                onAddField={onAddField}
                onActiveField={onActiveField}
                fieldOptions={fieldOptions}
                currentEditField={currentEditField}
              >
                {children}
              </DropField>
            </div>
          )
      );
    }
  }

  return DrawDragField;
}
Example #5
Source File: Card.jsx    From townsquare-client with MIT License 5 votes vote down vote up 
Card = DragSource(ItemTypes.CARD, cardSource, collect)(InnerCard)
Example #6
Source File: custom-tab-bar-node.jsx    From virtuoso-design-system with MIT License 5 votes vote down vote up 
WrapTabNode = DropTarget('DND_NODE', cardTarget, connect => ({
  connectDropTarget: connect.dropTarget(),
}))(
  DragSource('DND_NODE', cardSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    isDragging: monitor.isDragging(),
  }))(TabNode),
)
Example #7
Source File: createDrawDragComponent.js    From hzero-front with Apache License 2.0 4 votes vote down vote up 
export default function createDrawDragComponent({
  componentCanDrag = false,
  dropComponent = createDropComponent(),
  ...dragProps
} = {}) {
  const DropComponent = dropComponent;
  class DrawDragComponent extends React.Component {
    constructor(props) {
      super(props);
      this.state = {};

      this.handleRemoveComponent = this.handleRemoveComponent.bind(this);
      this.handleDrawComponentClick = this.handleDrawComponentClick.bind(this);
    }

    handleDrawComponentClick(e) {
      // 阻止冒泡
      e.stopPropagation();
      const { onActiveComponent, component } = this.props;
      if (isFunction(onActiveComponent)) {
        onActiveComponent(component);
      }
    }

    render() {
      const {
        component = {},
        // connectDragSource,
        onAddField,
        onActiveField,
        onSwapField,
        onRemoveField,
        children,
        currentEditComponent,
        currentEditField,
      } = this.props;
      return (
        <div className={styles['draw-drag-component']} onClick={this.handleDrawComponentClick}>
          <span
            className={styles['draw-drag-component-remove']}
            onClick={this.handleRemoveComponent}
          />
          <DropComponent
            component={component}
            onAddField={onAddField}
            onActiveField={onActiveField}
            onSwapField={onSwapField}
            onRemoveField={onRemoveField}
            currentEditComponent={currentEditComponent}
            currentEditField={currentEditField}
          >
            {children}
          </DropComponent>
        </div>
      );
    }

    handleRemoveComponent(e) {
      // 阻止冒泡
      e.stopPropagation();
      const { component, onRemoveComponent } = this.props;
      if (isFunction(onRemoveComponent)) {
        onRemoveComponent(component);
      }
    }
  }
  if (componentCanDrag) {
    const {
      drawType = DragType.drawDragComponent,
      beginDrag = defaultBeginDrag,
      canDrag = defaultCanDrop,
    } = dragProps;
    const drawDragComponentSpec = {
      beginDrag,
      canDrag,
    };

    const drawDragComponentCollect = (connect, monitor) => {
      const connectDragSource = connect.dragSource();
      const connectDragPreview = connect.dragPreview();
      const isDragging = monitor.isDragging();
      return {
        connectDragSource,
        connectDragPreview,
        isDragging,
      };
    };
    return DragSource(drawType, drawDragComponentSpec, drawDragComponentCollect)(DrawDragComponent);
  }
  return DrawDragComponent;
}