Question

我需要在我的页面中放置一张图片。我想禁用拖动该图像。我正在尝试很多东西，但没有任何帮助。有人可以帮助我吗？

我不想将该图像保留为背景图像，因为我正在调整图像大小。

Answer 1

你可以这样......

document.getElementById('my-image').ondragstart = function() { return false; };

See it working (or not working, rather)

看来你正在使用jQuery。

$('img').on('dragstart', function(event) { event.preventDefault(); });

Answer 2

仅CSS解决方案：使用pointer-events: none

https://developer.mozilla.org/en-US/docs/CSS/pointer-events

Answer 3

只需在图片代码中添加draggable =“false”：

<img draggable="false" src="image.png">

IE8及以下不支持。

Answer 4

window.ondragstart = function() { return false; }

Answer 5

我试过自己，发现这是有效的。

$("img").mousedown(function(){
    return false;
});

我确信这会禁用拖动所有图像。不确定它会影响别的东西。

Answer 6

最简单的跨浏览器解决方案

<img draggable="false" ondragstart="return false;" src="..." />

问题

img {
 -moz-user-select: none;
 -webkit-user-select: none;
 -ms-user-select: none;
 user-select: none;
 -webkit-user-drag: none;
 user-drag: none;
 -webkit-touch-callout: none;
}

是它在firefox中不起作用

Answer 7

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

我在http://www.namdevmatrimony.in/的网站上使用过它它像魔术一样工作！：）

Answer 8

见answer;在Chrome和Safari中，您可以使用以下样式禁用默认拖动：

-webkit-user-drag: auto | element | none;

您可以尝试user-select用于Firefox和IE（10 +）：

-moz-user-select: none | text | all | element
-ms-user-select: none | text | all | element

Answer 9

您可以将以下内容添加到您不希望可拖动的每个图像中（在img标记内）：

onmousedown="return false;"

e.g。

img src="Koala.jpg" onmousedown="return false;"

Answer 10

此代码完全符合您的要求。它可以防止图像拖动，同时允许任何其他依赖于事件的操作。

$("img").mousedown(function(e){
    e.preventDefault()
});

Answer 11

在图片代码中直接使用此代码：ondragstart="return false;"。

<img src="http://image-example.png" ondragstart="return false;"/>

如果您有多个图片，请使用<div>标记：

<div ondragstart="return false;">
   <img src="image1.png"/>
   <img scr="image2.png"/>
</div>

适用于所有主流浏览器。

Answer 12

由于我的图像是使用ajax创建的，因此无法在windows.load上使用。

$("#page").delegate('img', 'dragstart', function (event) { event.preventDefault(); });

通过这种方式，我可以控制哪个部分阻止了行为，它只使用一个事件绑定，它可以用于未来的ajax创建的图像而无需做任何事情。

使用jQuery新on绑定：

$('#page').on('dragstart', 'img', function(event) { event.preventDefault(); }); （感谢@ialphan）

Answer 13

将以下CSS属性设置为图像：

user-drag: none; 
user-select: none;
-moz-user-select: none;
-webkit-user-drag: none;
-webkit-user-select: none;
-ms-user-select: none;

Answer 14

很好的解决方案，有一个小问题冲突，如果其他任何人与其他js库发生冲突，则不要像这样冲突。

var $j = jQuery.noConflict();$j('img').bind('dragstart', function(event) { event.preventDefault(); });

希望这可以帮助别人。

Answer 15

嗯，我不知道这里的答案是否对每个人都有帮助，但这里有一个简单的内联CSS技巧，肯定会帮助你在HTML页面上禁用拖动和选择文本。

在<body>标记上添加ondragstart="return false"。这将禁用拖动图像。但是，如果您还想禁用文本选择，请添加onselectstart="return false"。

代码如下所示：<body ondragstart="return false" onselectstart="return false">

Answer 16

<img draggable="false" src="images/testimg1.jpg" alt=""/>

Answer 17

您可能认为我的解决方案最好。大多数答案与IE8等旧浏览器不兼容，因为不支持 e.preventDefault（）以及 ondragstart 事件。为了实现跨浏览器兼容，您必须阻止此图像的 mousemove 事件。见下面的例子：

<强>的jQuery

using System;
using System.Windows.Forms;
using System.Runtime.InteropServices;


namespace Test
{
    static class Program
    {
        [DllImport("kernel32.dll")]
        static extern bool AttachConsole(int dwProcessId);
        private const int ATTACH_PARENT_PROCESS = -1;

        [STAThread]
        static void Main()
        {
            AttachConsole(ATTACH_PARENT_PROCESS);
            Console.WriteLine("This will show on console.");

            Application.EnableVisualStyles();
            Application.SetCompatibleTextRenderingDefault(false);

            Application.Run(new Form1());
        }
    }
}

没有jQuery

$("#my_image").mousemove( function(e) { return false } ); // fix for IE
$("#my_image").attr("draggable", false); // disable dragging from attribute

甚至为IE8测试和工作

Answer 18

document.getElementById('#yourImageId').addEventListener('dragstart', function(e) {
     e.preventDefault();
});

适用于此Plunker http://plnkr.co/edit/HbAbJkF0PVLIMjTmEZml

Answer 19

嗯，这是可能的，并且发布的其他答案完全有效，但您可以采取暴力方法并防止mousedown在图像上的默认行为。其中，就是开始拖动图像。

这样的事情：

window.onload = function () {  
    var images = document.getElementsByTagName('img');   
    for (var i = 0; img = images[i++];) {    
        img.ondragstart = function() { return false; };
    }  
};

Answer 20

jQuery：

$('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});

您可以将 body 选择器替换为您要防止子级拖放的任何其他容器。

Answer 21

答案很简单：

<body oncontextmenu="return false"/>-禁用右键单击 <body ondragstart="return false"/>-禁用鼠标拖动 <body ondrop="return false"/>-禁用鼠标拖放

Answer 22

使用 JQuery 的优雅方式

$("body").on('mousedown','img',function(e){
    e.stopPropagation();
    e.preventDefault();
});

Answer 23

从我自己的answer窃取，只需在图像上添加一个相同大小的完全透明元素。调整图像大小时，请务必调整元素大小。

这适用于大多数浏览器，甚至是较旧的浏览器。

Answer 24

我做了这里显示的css属性以及使用以下javascript监视ondragstart：

handleDragStart: function (evt) {
    if (evt.target.nodeName.match(/^(IMG|DIV|SPAN|A)$/i)) {
      evt.preventDefault();
      return false;
    }
  },

Answer 25

您可以为此使用内联代码

<img draggable="false" src="http://www.ourkanpur.com/images/logo.png">

第二个选项是使用外部CSS或页面CSS

img {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}

<img src="http://www.ourkanpur.com/images/logo.png">

两者均正常工作 我正在此网站(Click Here)

上使用外部CSS

禁用从HTML页面拖动图像

25 个答案: