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

Question

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

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

$(".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);


});

 });

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

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