我正在构建一个使用查询的拖放方法
-onmousedown
导致-onmousemove(拖动)然后-onmouseup(unbinds onmousemove) @H_502_4@问题是,浏览器默认开始突出显示onmousemove,它会遍布整个页面并取消事件,使其无法使用.任何想法如何防止突出显示,因为preventDefault似乎没有工作.这是我的代码(是的,非常草率,对不起！) @H_@R_403_448@_6@$(".middleRow").mousedown(function(){ calculateSelection(); $('body').append('<div class="messageDrag" style="display:block">'+numSelected+'<div style="font-size: 18px">messages</div></div>'); $(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); }); });
-onmousedown
导致-onmousemove(拖动)然后-onmouseup(unbinds onmousemove) @H_502_4@问题是,浏览器默认开始突出显示onmousemove,它会遍布整个页面并取消事件,使其无法使用.任何想法如何防止突出显示,因为preventDefault似乎没有工作.这是我的代码(是的,非常草率,对不起！) @H_@R_403_448@_6@$(".middleRow").mousedown(function(){ calculateSelection(); $('body').append('<div class="messageDrag" style="display:block">'+numSelected+'<div style="font-size: 18px">messages</div></div>'); $(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); }); });
解决方法
您可以使用css禁用突出显示
@H_@R_403_448@_6@-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;
@H_502_4@另一种方法是清除drop事件的选择,如下所示：
@H_@R_403_448@_6@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();
}
}
@H_502_4@所以你会在drop事件上调用clearSelection()(拖动完成后)
