Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cant get basic version working in React?

See original GitHub issue

I’m not sure if Im missing something basic but the following does nothing. I would expect something to get logged to the console when I tried to drag?

import React from "react";
import Moveable from "react-moveable";

class SomeComponent extends React.Component {
  render() {
    return (
      <React.Fragment>
        <div className="draggable">
          <div>Drag me</div>
        </div>
        <Moveable
          target={document.querySelector(".draggable")}
          draggable={true}
          throttleDrag={0}
          onDragStart={res => {
            console.log(res);
          }}
          onDrag={res => {
            console.log(res);
          }}
        />
      </React.Fragment>
    );
  }
}

export default SomeComponent;

Issue Analytics

State:
Created 4 years ago
Comments:6 (2 by maintainers)

Top GitHub Comments

5reactions

jameschetwoodcommented, Oct 26, 2019

Quickly reopening just so I can share some code of this working incase it helps someone else finding this issue. Here is the codepen link: https://codesandbox.io/s/recursing-archimedes-jzw6p

function App() {
  return (
    <div className="App">
      <ThingToMove />
    </div>
  );
}

const ThingToMove = () => {
  const moveRef = React.useRef(null);
  const [style, setStyle] = React.useState("");

  return (
    <div>
      <h2
        ref={moveRef}
        style={{
          transform: style
        }}
      >
        Move me
      </h2>
      <MovableComponent moveRef={moveRef} setStyle={setStyle} />
    </div>
  );
};

const Movable = ({ moveRef, setStyle }) => {
  const [renderMovable, settRenderMovable] = React.useState(false);

  React.useEffect(() => {
    settRenderMovable(true);
  }, []);

  const handleDrag = e => {
    setStyle(e.transform);
  };

  if (!renderMovable) return null;

  return (
    <Moveable
      target={moveRef.current}
      draggable={true}
      throttleDrag={0}
      onDrag={handleDrag}
    />
  );
};

0reactions

jordie23commented, Apr 26, 2020

@jameschetwood thank you! None of the examples on the repo are actually helpful.

Yours works with 1 modification:

const Movable = ({ moveRef, setStyle }) => {

should be

const MovableComponent = ({ moveRef, setStyle }) => {

Here is a full working example that can be pasted into App.js of a new react-create-app app:

import React from "react";
import Moveable from "react-moveable";

function App() {
  return (
    <div className="App">
      <ThingToMove />
    </div>
  );
}

const ThingToMove = () => {
  const moveRef = React.useRef(null);
  const [style, setStyle] = React.useState("");

  return (
    <div>
      <h2
        ref={moveRef}
        style={{
          transform: style
        }}
      >
        Move me
      </h2>
      <MovableComponent moveRef={moveRef} setStyle={setStyle} />
    </div>
  );
};

const MovableComponent = ({ moveRef, setStyle }) => {
  const [renderMovable, settRenderMovable] = React.useState(false);

  React.useEffect(() => {
    settRenderMovable(true);
  }, []);

  const handleDrag = e => {
    setStyle(e.transform);
  };

  if (!renderMovable) return null;

  return (
    <Moveable
      target={moveRef.current}
      draggable={true}
      throttleDrag={0}
      onDrag={handleDrag}
    />
  );
};

export default App