React 实现简易的图片拖动排序

2024-01-01 10:48:43

React 实现简易的图片拖动排序#

如今，随着 Web 界面的飞速发展，不仅要求各种页面风格独特美观，而且要求其具有良好的交互性，从而使用户在享受精美的同时，又能便捷地操作。图片拖动排序是一项十分常见的功能，它允许用户通过拖动图片来改变它们在页面上的位置，从而达到排序的目的。在本文中，我将介绍如何在 React 中实现简易的图片拖动排序。

准备工作

在开始之前，我们需要先准备好图片拖动排序所需的工具和素材。

React 库：React 是一个用于构建用户界面的 JavaScript 库，它可以帮助我们轻松地创建和管理复杂的 UI 组件。
CSS 样式表：CSS 样式表用于定义网页的样式，我们将使用它来设置图片拖动排序的样式。
图片素材：我们需要准备一些图片素材来进行拖动排序。

实现步骤

创建 React 组件

首先，我们需要创建一个 React 组件来管理图片拖动排序。我们将这个组件命名为 ImageDragSort。

import React, { useState } from 'react';

const ImageDragSort = () => {
  const [images, setImages] = useState([
    { id: 1, url: 'image1.jpg' },
    { id: 2, url: 'image2.jpg' },
    { id: 3, url: 'image3.jpg' },
  ]);

  const handleDragStart = (e, image) => {
    e.dataTransfer.setData('image', JSON.stringify(image));
  };

  const handleDragOver = (e) => {
    e.preventDefault();
  };

  const handleDrop = (e) => {
    e.preventDefault();

    const image = JSON.parse(e.dataTransfer.getData('image'));
    const newImages = [...images];
    const imageIndex = newImages.findIndex((i) => i.id === image.id);
    const targetIndex = e.target.closest('.image-item').dataset.index;

    if (imageIndex !== targetIndex) {
      newImages.splice(imageIndex, 1);
      newImages.splice(targetIndex, 0, image);
      setImages(newImages);
    }
  };

  return (
    <div className="image-drag-sort">
      {images.map((image, index) => (
        <div
          className="image-item"
          data-index={index}
          draggable={true}
          onDragStart={(e) => handleDragStart(e, image)}
          onDragOver={handleDragOver}
          onDrop={handleDrop}
        >
          <img src={image.url} alt={image.id} />
        </div>
      ))}
    </div>
  );
};

export default ImageDragSort;

设置 CSS 样式

接下来，我们需要设置 CSS 样式来定义图片拖动排序的样式。

.image-drag-sort {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.image-item {
  width: 100px;
  height: 100px;
  margin: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  cursor: grab;
}

.image-item:active {
  cursor: grabbing;
}

使用 React 组件

最后，我们需要在我们的 React 应用中使用 ImageDragSort 组件。

import ImageDragSort from './ImageDragSort';

const App = () => {
  return (
    <div>
      <h1>图片拖动排序</h1>
      <ImageDragSort />
    </div>
  );
};

export default App;