如何在React应用中禁止图片拖放？（无需jQuery，分局部/全局）

Hey there! I get you want to block image drag-and-drop (to prevent users from saving images that way) in your React app without relying on jQuery, while keeping other image interactions like clicks or hovers intact. Let's break down how to do both local and global implementations properly:

For individual images, you can directly attach a onDragStart event handler to the <img> element and call preventDefault() to stop the default drag behavior. This keeps all other interactions (like clicks) fully functional.

Here's a quick example in a functional component:

function SingleProtectedImage() {
  // Handle drag start event
  const stopImageDrag = (e) => {
    e.preventDefault();
  };

  return (
    <img
      src="/path-to-your-image.jpg"
      alt="Protected image"
      onDragStart={stopImageDrag}
      // You can still add other interaction events here
      onClick={() => alert("Image clicked!")}
      onMouseEnter={() => console.log("Hovered over image")}
    />
  );
}

When a user tries to drag this image, the stopImageDrag function kicks in and blocks the default drag action, but all other events (like onClick) will work as expected.

If you want to apply this restriction to every image in your app, you have two solid options:

Option 1: Global Event Listener #

Use React's useEffect hook to attach a document-level event listener that checks if the dragged element is an image, then blocks the drag action. This works for all images, even those added dynamically later.

import { useEffect } from 'react';

function App() {
  useEffect(() => {
    const blockAllImageDrags = (e) => {
      // Check if the target of the drag is an <img> tag
      if (e.target.tagName.toLowerCase() === 'img') {
        e.preventDefault();
      }
    };

    // Add the listener when the component mounts
    document.addEventListener('dragstart', blockAllImageDrags);

    // Clean up the listener when the component unmounts to avoid memory leaks
    return () => {
      document.removeEventListener('dragstart', blockAllImageDrags);
    };
  }, []); // Empty dependency array means this runs once on mount

  return (
    <div className="App">
      {/* All images here will be protected from dragging */}
      <img src="/img1.jpg" alt="Image 1" onClick={() => console.log("Img1 clicked")} />
      <img src="/img2.jpg" alt="Image 2" />
      {/* Even dynamically loaded images will be covered */}
    </div>
  );
}

Option 2: Custom Reusable Image Component #

Create a custom image component that includes the drag-blocking logic, then use this component everywhere instead of the native <img> tag. This gives you more control (you can choose when to use the protected version vs native).

// NoDragImage.jsx
import React from 'react';

export default function NoDragImage(props) {
  const stopDrag = (e) => {
    e.preventDefault();
  };

  // Spread all props and add the drag handler
  return <img {...props} onDragStart={stopDrag} />;
}

Then use it in your app:

import NoDragImage from './NoDragImage';

function App() {
  return (
    <div>
      <NoDragImage src="/protected-img.jpg" alt="Protected" onClick={() => alert("Clicked!")} />
      {/* If you ever need an unprotected image, just use the native <img> tag */}
      <img src="/unprotected-img.jpg" alt="Unprotected" />
    </div>
  );
}

Important Note #

Both approaches avoid using pointer-events: none (which would disable all mouse interactions with images) — they only block the drag-and-drop behavior while preserving clicks, hovers, and other user interactions.

内容的提问来源于stack exchange，提问作者Soleil