Question 215155 in CSS Question posted in
Some basic documentation can be found here.

Css – What equation can determine Y coordinates from element to fixed target element

https://codesandbox.io/s/drag-find-y-f2jltf

I know what I want to accomplish but I don’t know how to go about it.

You can see in my CodeSandbox when you drag the balls towards the target element (the box with white border) the X always has a certain distance it has to travel. Which is great because I can use this fixed distance for other equations. You can see this in the console log.

But because the balls run down the height of the page, the distance on the y axis that it takes to reach the target varies every time. What equation do I use to get a fixed Y for this distance that is the same for every ball? I want to use this value for other equations.

What am I not considering to factor into the equation? The height of the overall page minus something else?

I tried to explain this the best I can I just don’t know how to explain it.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out. All I needed to do was use the React pointer event onPointerMove in order to get access to currentTarget. On currentTarget I now have access to getBoundingClientRect() which has the properties I need such as top and left.

    These properties show me the distance between my ball and the top and left of the screen. I log these and store them in my motionValue. While dragging the balls I console log the values and note down where the ball needs to be in order to be inside the target.

    Code below and codesandbox updated: https://codesandbox.io/s/drag-find-y-f2jltf?file=/src/App.js

    import { useMotionValue, motion } from "framer-motion";

const Target = () => {
  return (
    <div className="target-container">
      <div className="inner-target">Target Box</div>
    </div>
  );
};


const Grid = ({ handleDrag }) => {
  return (
    <div>
      {list.map((i) => {
        return (
          <motion.div
            key={i}
            drag
            onPointerMove={(e) => handleDrag(e)}
            dragSnapToOrigin
            dragPropagation={true}
            dragElastic={0.7}
            dragMomentum={false}
            style={{ zIndex: 3 }}
            className="drag-ball"
          />
        );
      })}
    </div>
  );
};




export default function App() {
  const ballX = useMotionValue(0);
  const ballY = useMotionValue(0);
  const coords = { ballX, ballY };

  //function to determine where the x and y of ball is when dragged

  const handleDrag = (e) => {
    const { top, left } = e.currentTarget.getBoundingClientRect();

    ballX.set(left);
    ballY.set(top);

    const xDone = left < 188 && left > 40;
    const yDone = top > 250 && top < 403;

    // values I need for parts of my program

    console.log(top);
    console.log(left);
  };

  return (
    <main className=".App">
      <section className="whole-section">
        <Target />
        <div className="empty-div" />
        <Grid handleDrag={handleDrag} />
      </section>
    </main>
  );
}



const list = [
  0,
  1,
  2,
  3,
  4,
  5,
  6,
  7,
  8,
  9,
  10,
  11,
  12,
  13,
  14,
  15,
  16,
  17,
  18,
  19,
  20
];

  2. 0

    Assuming that you are dealing with a linear relationship between x and y, what you need to do to figure out y from x is to plug into the inverse linear transformation matrix.

    How’s your math? There’s definitely information on how to do this on the web.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search