在圖像上拖動鼠標時禁用選擇

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; 
}