React实现拖拽特效

前言

最近，我看到一个工程师的个人网站上，采用了拖拽作品集的互动特效，既有趣又吸引眼球。经过一些研究，我发现其实借助一些现成的套件，就能轻松实现这样的效果。今天就带大家一起看看，如何通过 Framer Motion 来制作这个特效吧！

安装 React + Framer Motion

我将使用 React 和 Framer Motion 来实现这个特效。首先，用 Vite 来快速搭建一个 React 开发环境：

npm create vite@latest my-react-app -- --template react

执行完成后就依序执行以下指令，分别是：

cd my-react-app : 移动到 my-react-app 资料夹
npm install : 安装相关依赖
npm run dev : 执行

cd my-react-app
npm install
npm run dev

打开浏览器，访问 http://localhost:5173，你应该会看到一个基础的 React 应用如下图。

并且也可以看到你的资料夹结构，如果只是想练习这个特效，直接改 App.jsx 就好

下一步就是安装 Framer Motion，直接在终端机打上以下指令就好：

npm install framer-motion

引入图片 & 创建容器

我们将图片保存在 ./public/drag-img/ 文件夹中，并用数组来存储图片路径。通过 Array.map() 方法，我们可以轻松地渲染出所有的图片。

const images = [
  '/drag-img/image-1.png',
  '/drag-img/image-2.png',
  '/drag-img/image-3.png',
  '/drag-img/image-4.png',
  '/drag-img/image-5.png',
  '/drag-img/image-6.png',
  '/drag-img/image-7.png',
  '/drag-img/image-8.png',
  '/drag-img/image-9.png',
  '/drag-img/image-10.png',
  '/drag-img/image-11.png',
  '/drag-img/image-12.png',
  '/drag-img/image-13.png',
  '/drag-img/image-14.png',
];

然后，我们创建一个容器来存放这些图片。为了方便后续操作，我们使用 useRef 来引用容器，以便后面获取容器的宽高。

export default function DragImg() {
  const containerRef = useRef(null);

  return (
    <div
      ref={containerRef}
      className='drag-img__container'
    >
       {/* 图片渲染 */}
    </div>
  );
}

接下来，稍微修改一下style样式

.drag-img__container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f0f0f0;
}

渲染图片 & 随机位置

通过刚才定义的 images 数组来渲染所有图片。这里使用的是 motion.img 标签，这样才能使用 Framer Motion 提供的动画和交互功能。

export default function DragImg() {
  const containerRef = useRef(null);

  return (
    <div
      ref={containerRef}
      className='drag-img__container'
    >
      {images.map((src, index) => (
        <motion.img
          key={index}
          src={src}
          className='drag-img__img'
          alt={`Image ${index + 1}`}
        />
      ))}
    </div>
  );
}

.drag-img__img {
  width: 200px;
  aspect-ratio: 4/3;
  object-fit: contain;
  padding: 4px;
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  cursor: grab;
}

稍微调整图片的宽度、比例，并让他的 position 是 absolute，其他就是一些小装饰，例如 padding、shadow 等等，现在所有的图片都会在右上角，因为我们还没调整他们的位置

接著可以利用 JavaScript 来随机图片的位置，顺便随机旋转的角度，让他有种散落在整个 container 的感觉。

{images.map((src, index) => (
  <motion.img
    key={index}
    src={src}
    className='drag-img__img'
    alt={`Image ${index + 1}`}
    style={
  
  {
      top: `${Math.random() * (window.innerHeight - 200)}px`,
      left: `${Math.random() * (window.innerWidth - 150)}px`,
      rotate: `${Math.random() * 40 - 20}deg`,
    }}
  />
))}

实现拖拽效果

接下来，重点来了------使用 Framer Motion 来实现拖拽效果。由于 Framer Motion 内置了 drag 属性，整个过程非常简单，只需要在 motion.img 上添加 drag 属性，并指定拖拽范围。

{images.map((src, index) => (
  <motion.img
    key={index}
    src={src}
    className="drag-img__img"
    alt={`Image ${index + 1}`}
    style={
  
  {
      top: `${Math.random() * (window.innerHeight - 200)}px`,
      left: `${Math.random() * (window.innerWidth - 150)}px`,
      rotate: `${Math.random() * 40 - 20}deg`,
    }}
    drag
    dragConstraints={containerRef}  // 限制拖拽范围
    whileDrag={
  
  { scale: 1.1, rotate: 0 }}  // 拖拽时的样式调整
  />
))}

这里，我们添加了 dragConstraints，使图片只能在容器内拖动，不会超出边界。同时，使用 whileDrag 来调整拖拽时图片的缩放和旋转效果。

完整代码示例

到此为止就完全搞定了，其实非常简单！以下附上全部的代码：

import { useRef } from 'react';
import { motion } from 'framer-motion';

const images = [
  '/drag-img/image-1.png',
  '/drag-img/image-2.png',
  '/drag-img/image-3.png',
  '/drag-img/image-4.png',
  '/drag-img/image-5.png',
  '/drag-img/image-6.png',
  '/drag-img/image-7.png',
  '/drag-img/image-8.png',
  '/drag-img/image-9.png',
  '/drag-img/image-10.png',
  '/drag-img/image-11.png',
  '/drag-img/image-12.png',
  '/drag-img/image-13.png',
  '/drag-img/image-14.png',
];

export default function DragImg() {
  const containerRef = useRef(null);

  return (
    <div
      ref={containerRef}
      className='drag-img__container'
    >
      {images.map((src, index) => (
        <motion.img
          key={index}
          src={src}
          className='drag-img__img'
          alt={`Image ${index + 1}`}
          style={
  
  {
            top: `${Math.random() * (window.innerHeight - 200)}px`,
            left: `${Math.random() * (window.innerWidth - 150)}px`,
            rotate: `${Math.random() * 40 - 20}deg`,
          }}
          drag
          dragConstraints={containerRef}
          whileDrag={
  
  { scale: 1.1, rotate: 0 }}
        />
      ))}
    </div>
  );
}

.drag-img__container {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #f0f0f0;
}

.drag-img__img {
  width: 200px;
  aspect-ratio: 4/3;
  object-fit: contain;
  padding: 4px;
  position: absolute;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.1);
  cursor: grab;
}

通过以上步骤就成功创建了一个可以拖拽的图片展示特效。操作非常简单，而且效果十分酷炫！快来试试看吧！