禁用React中的拖放图像的方法

在本教程中，我们将通过实例来学习如何在React中禁用拖放图片的功能。

考虑一下，我们的React应用程序中有一个图像。

import  React from "react";

function App {
    return (
      <div>
          <img src="https://via.placeholder.com/150" />
      </div>
    );
}

export default App;

要禁用React中的拖放图像，请在图像元素中添加onDragStart 事件，并在其中调用event.preventDefault() 方法。

event.preventDefault() 方法可以阻止浏览器的默认动作，所以它可以禁止图像的拖放。

这里有一个例子。

import  React from "react";

function App {
    return (
      <div>
          <img src="https://via.placeholder.com/150"
           onDragStart={(event)=> event.preventDefault()}
          />
      </div>
    );
}

export default App;

同样地，我们可以通过将HTML的可拖动属性设置为false ，来禁止拖放图像。

下面是一个例子。

import  React from "react";

function App {
    return (
      <div>
          <img src="https://via.placeholder.com/150"
           draggable="false"
          />
      </div>
    );
}

export default App;

draggable 属性可以接受以下值。

• true：该元素可以被拖动。

• false：该元素不能被拖动。

使用CSS禁用拖放图像

我们还可以通过将csspointer-events 属性设置为none ，来禁用拖放图像。

当我们将指针-事件属性设置为一个值"none" ，该元素就不会对任何光标或触摸事件作出反应。

import  React from "react";

function App {
    return (
      <div>
          <img src="https://via.placeholder.com/150" />
      </div>
    );
}

export default App;

img{
    pointer-events: none;
}