在图像上拖动鼠标时禁用选择

Question

我试图在拖动图像时禁用选择。但它似乎并不奏效。我知道类似questions已被问到，但似乎没有为我工作。

我也尝试在许多类似的问题中建议在CSS中输入。

-webkit-touch-callout: none;/*for mobile*/ 
-webkit-user-select: none;/*for chrome*/ 
-khtml-user-select: none;/*for safari*/ 
-moz-user-select: none;/*for Mozilla*/ 
-ms-user-select: none;/*for mircosoft*/ 
-o-user-select: none;/*for opera*/ 
user-select: none;/*base css ,but not work in all browsers*/ 

FIDDLE

Answer 1

通过设置e.dataTransfer.setDragImage到1px的透明画布和鼠标拖拽固定它仍然有效

var c = document.getElementById("canvas"); 

document.getElementById("image").addEventListener("dragstart", function(e) { 
    e.dataTransfer.setDragImage(c, 0, 0); 
}, false); 


document.getElementById("image").addEventListener("dragover", function(e) { 
    e.preventDefault(); 
}, false); 

FIDDLE

Answer 2

使用用户拖动css选项

img { 
    -webkit-user-drag: none; 
    -khtml-user-drag: none; 
    -moz-user-drag: none; 
    -o-user-drag: none; 
    user-drag: none; 
}