拖放，防止尴尬的突出显示？ [英] drag and drop, prevent awkward highlighting?

问题描述

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

I'm building a drag and drop method, using query -onmousedown leading to -onmousemove (drag) then -onmouseup (unbinds onmousemove)

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

the problem is, browser defaults begin highlighting onmousemove, which flies all over the page and cancels the event, rendering it unusable. any idea how to prevent highlighting, for preventDefault seems not to be working. here is my code (yes its very sloppy, sorry!)

$(".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禁用高亮显示

You could disable highlighting using 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事件的选择，如下所示：

another way of doing this is to clear selection on drop event, as so:

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 （）在拖放事件（拖拽完成后）

So you would call clearSelection() on drop event (after the drag is finished)

这篇关于拖放，防止尴尬的突出显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！