Gestures

Gesture support is built in to Motion.

"use client";
 
import { motion } from "framer-motion";
import { useRef } from "react";
 
export function DragExample() {
  const boundingBox = useRef(null);
 
  return (
    <div ref={boundingBox} className="h-64 w-full p-6">
      <motion.div
        drag
        dragConstraints={boundingBox}
        dragMomentum={false}
        className="h-10 w-10 rounded-full bg-gray-400"
      />
    </div>
  );
}

• We provide a boundingBox to prevent the draggable element from being dragged outside of it.
• By default, the draggable element will continue to have the momentum it had at the moment of letting go. This is not the behavior we need for a simple drag and drop functionality, so we can disable this with dragMomentum={false} prop.