是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性,而是体验)。
我已经尝试了这个,它修复了文本和图像上的蓝色选择的问题,但不是幽灵图像:
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
(我也尝试用同样的规则嵌套div内的图像)。 谢谢
是否有一种方法可以防止用户看到他们试图拖动的图像的幽灵(不是关心图像的安全性,而是体验)。
我已经尝试了这个,它修复了文本和图像上的蓝色选择的问题,但不是幽灵图像:
img {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
(我也尝试用同样的规则嵌套div内的图像)。 谢谢
当前回答
HTML
<img draggable="false" src="img/example.jpg">
JavaScript
document.querySelector('img').addEventListener('dragstart', (event) => {
event.preventDefault();
});
CSS
img {
-webkit-user-drag: none;
}
目前在浏览器或标准轨道中没有无前缀的user-drag或其他版本的属性实现,因为HTML可拖动属性/属性是首选的解决方案。
它是webkit特有的属性。以下是WebKit文档对它的描述:
Heading WebKit provides automatic support to let users drag common items, such as images, links, and selected text. You can extend this support to include specific elements on an HTML page. For example, you could mark a particular div or span tag as draggable. To mark an arbitrary element as draggable, add the -webkit-user-drag attribute to the style definition of the element. Because -webkit-user-drag is a cascading style sheet (CSS) attribute, you can include it as part of a style definition, or as an inline style attribute on the element tag. The values for this attribute are listed in Table 4-1. Values for -webkit-user-drag attribute: none: Do not allow this element to be dragged. element: Allow this element to be dragged. auto: Use the default logic for determining whether the element should be dragged. (Images, links, and text selections are the only elements that can be dragged.) This is the default value.
所有使用WebKit渲染引擎的浏览器都支持它,比如Chrome、更新版本的Opera、Safari等等。使用WebKit的移动浏览器的支持可能因移动操作系统而异。
其他回答
如果你真的需要使用拖动事件,并且不能设置draggable=false,你可以分配一个备用鬼图像。所以只需要像这样分配一个空白的png:
$('#img').bind({
dragstart: function(e) {
var dragIcon = document.createElement('img');
dragIcon.src = 'blank.png';
dragIcon.width = 100;
e.dataTransfer.setDragImage(dragIcon, -10, -10);
}
});
HTML
<img draggable="false" src="img/example.jpg">
JavaScript
document.querySelector('img').addEventListener('dragstart', (event) => {
event.preventDefault();
});
CSS
img {
-webkit-user-drag: none;
}
目前在浏览器或标准轨道中没有无前缀的user-drag或其他版本的属性实现,因为HTML可拖动属性/属性是首选的解决方案。
它是webkit特有的属性。以下是WebKit文档对它的描述:
Heading WebKit provides automatic support to let users drag common items, such as images, links, and selected text. You can extend this support to include specific elements on an HTML page. For example, you could mark a particular div or span tag as draggable. To mark an arbitrary element as draggable, add the -webkit-user-drag attribute to the style definition of the element. Because -webkit-user-drag is a cascading style sheet (CSS) attribute, you can include it as part of a style definition, or as an inline style attribute on the element tag. The values for this attribute are listed in Table 4-1. Values for -webkit-user-drag attribute: none: Do not allow this element to be dragged. element: Allow this element to be dragged. auto: Use the default logic for determining whether the element should be dragged. (Images, links, and text selections are the only elements that can be dragged.) This is the default value.
所有使用WebKit渲染引擎的浏览器都支持它,比如Chrome、更新版本的Opera、Safari等等。使用WebKit的移动浏览器的支持可能因移动操作系统而异。
document.querySelectorAll("*").forEach((elem) => {
elem.setAttribute('draggable', false)
elem.addEventListener('dragstart', (event) => {
event.preventDefault()
})
})
这将禁用对所有元素的拖动。
be-all-end-all,用于不选择或拖动,所有浏览器前缀:
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-user-drag: none;
-khtml-user-drag: none;
-moz-user-drag: none;
-o-user-drag: none;
-ms-user-drag: none;
user-drag: none;
您还可以将draggable属性设置为false。你可以用内联HTML: draggable="false", Javascript: elm来实现。draggable = false,或者用jQuery: elm。attr(“拖拽”,假)。
您还可以处理onmousedown函数以返回false。你可以用内联HTML: onmousedown="return false",用Javascript: elm.onmousedown=()=>return false;或用jQuery: elm.mousedown(()=>return false)来做到这一点。
您可以设置拖动项目时显示的图像。Chrome测试。
设置拖动图像
使用
onclick = myFunction();
myFunction(e) {
e.dataTransfer.setDragImage(someImage, xOffset, yOffset);
}
或者,正如已经在回答中提到的,如果不能拖动元素根本不是问题,您可以在HTML元素上设置draggable="false"。