拖放，防止尴尬的突出显示？

我正在构建一个拖放方法，使用查询-onmousedown导致-onmousemove（拖动）然后-onmouseup（unbinds onmousemove）

问题是，浏览器默认开始突出显示onmousemove，它会遍布整个页面并取消事件，使其无法使用。 任何想法如何防止突出显示，因为preventDefault似乎没有工作。 这是我的代码（是的，非常草率，对不起！）

$(".middleRow").mousedown(function(){ calculateSelection(); $('body').append('
'+numSelected+'
messages
'); $(document).mouseup(function(){ $('.messageDrag').fadeOut(500); setTimeout(function(){ $('.messageDrag').remove(); }, 500); $(document).unbind(); }) $(document).mousemove(function(e){ e.preventDefault(); var x = e.pageX; var y = e.pageY; $(".messageDrag").css("left", x-49); $(".messageDrag").css("top", y-49); }); }); 

Answer 1

您可以使用css禁用突出显示

 -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; 

另一种方法是清除drop事件的选择，如下所示：

 function clearSelection() { var sel; if(document.selection && document.selection.empty){ document.selection.empty() ; } else if(window.getSelection) { sel = window.getSelection(); if(sel && sel.removeAllRanges) sel.collapse(); } } 

所以你会在drop事件上调用clearSelection() （拖动完成后）

Answer 2

添加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*/