How can I get a custom ponent to drag?

The following works when clicked

import React from 'react';
import { DraggableCore } from 'react-draggable';

export default class Hello extends React.Component {

  onStart = () => {
    console.log('here');
  }

  render() {
    return (
      <DraggableCore
        onStart={this.onStart}
      >
        <h1>Drag me!</h1>
      </DraggableCore>
    );
  }
}

and this does not

import React from 'react';
import { DraggableCore } from 'react-draggable';

class Test extends React.Component {
  render() {
    return (
      <h1>{this.props.children}</h1>
    );
  }
}

export default class Hello extends React.Component {

  onStart = () => {
    console.log('here');
  }

  render() {
    return (
      <DraggableCore
        onStart={this.onStart}
      >
        <Test>Drag me!</Test>
      </DraggableCore>
    );
  }
}

with the only difference being that instead of h1 being used directly, it now uses custom ponent Test

.js

I have tried forwarding the ref. I have also tried wrapping it in a Fragment

https://github./mzabriskie/react-draggable

How can I get a custom ponent to drag?

The following works when clicked

import React from 'react';
import { DraggableCore } from 'react-draggable';

export default class Hello extends React.Component {

  onStart = () => {
    console.log('here');
  }

  render() {
    return (
      <DraggableCore
        onStart={this.onStart}
      >
        <h1>Drag me!</h1>
      </DraggableCore>
    );
  }
}

and this does not

import React from 'react';
import { DraggableCore } from 'react-draggable';

class Test extends React.Component {
  render() {
    return (
      <h1>{this.props.children}</h1>
    );
  }
}

export default class Hello extends React.Component {

  onStart = () => {
    console.log('here');
  }

  render() {
    return (
      <DraggableCore
        onStart={this.onStart}
      >
        <Test>Drag me!</Test>
      </DraggableCore>
    );
  }
}

with the only difference being that instead of h1 being used directly, it now uses custom ponent Test

https://stackblitz./edit/react-ev9iyu?file=Hello.js

I have tried forwarding the ref. I have also tried wrapping it in a Fragment

• javascript
• reactjs

Share Improve this question Follow asked Feb 11, 2019 at 22:54 tictic 2,51211 gold badge2323 silver badges3333 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Wrap your ponent with a div inside of DraggableCore:

<DraggableCore onStart={this.onStart}>
  <div>
    <Test>Drag me!</Test>
  </div>
</DraggableCore>

I'm super late to the game here but I hope this helps someone. You have to give your ponent a rest prop. You need to do this because DraggableCore copies the ponent and puts several event listeners on the ponent. Look at the render of DraggableCore. https://github./react-grid-layout/react-draggable/blob/master/lib/DraggableCore.js. Your ponent needs to be able to receive these event listeners.

const Test = ({ children, ...rest }) => {
  return (
    <div {...rest}>{children}</div>
  )
}

const Hello = () => {
  const handleStart = () => console.log('here');

  return (
    <DraggableCore
      onStart={handleStart}
    >
      <Test>Drag me!</Test>
    </DraggableCore>
  );
}