拖放，防止尴尬的高亮显示

drag and drop, prevent awkward highlighting?

本文关键字：高亮 显示 拖放      更新时间：2023-09-26

我正在构建一个拖放方法，使用query-onmousedown导致-ommousemove（拖动），然后-ommouseup（取消绑定onmmousmove）

问题是，浏览器默认值开始突出显示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);

});
 });

您可以使用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()

添加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*/
相关文章：