Question

为了防止用户在我的网站上拖动图像，看来我必须这样做：<img draggable="false" src="../example.jpg" style="width:100%">。

但是我有一堆图像要应用，所以我想知道是否有一种方法可以将其应用于CSS中的所有图像。

Answer 1

您无法使用CSS执行此操作。但是您可以通过JS（在此示例中为jQuery）做到这一点

$('img').attr('draggable', false);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">
<img src="https://via.placeholder.com/50x50">

Answer 2

您可以使用以下CSS做到这一点：

ctx.beginPath

Answer 3

改变元素的行为和交互性并不是CSS真正的目的（用于处理布局和外观）。

您可以在所有图像上设置user-drag和user-select（和浏览器版本）CSS属性，或者可以使用CSS选择器来访问和操作具有给定类或ID的一组元素。直接定位该类型的每个元素。由于您的图像上似乎没有任何CSS类，因此必须定位img元素，该元素当前会影响页面上的每个图像。

您可以使用基本的JavaScript（请参见代码段）或jQuery：

$('img').attr('draggable', false);

例如，如果以后您只想使某些组/类型的图像可拖动，则可以对它们应用CSS类，并使用它来仅定位具有该类的图像，而不用更改的属性每个 img元素。

//get all images & make them all non-draggable
var allImages = document.getElementsByTagName("img");
    for (element of allImages) { 
        element.draggable = false;
        //console.log(element.draggable);
    }
    
//make only images w/the appropriate CSS class draggable again    
var draggableImages = document.getElementsByClassName("draggableImage");
    for (element of draggableImages) { 
        element.draggable = true;
        //console.log(element.draggable);
    }

img {
  width: 60%;
}

.draggableImage {
   /*Whatever styles you might want to apply to a draggable image  */
}

<img draggable="true" src="http://via.placeholder.com/300x20"></img>

<img draggable="true" src="http://via.placeholder.com/300x20"></img>

<img class="draggableImage" draggable="true" src="http://via.placeholder.com/300x20"></img>

<img class="draggableImage" draggable="true" src="http://via.placeholder.com/300x20"></img>

使用CSS一次将draggable =“ false”应用于所有图像

3 个答案: