kéo và thả, ngăn chặn làm nổi bật khó xử?

Question

Tôi đang xây dựng một phương pháp kéo và thả, sử dụng truy vấn -onmousedown dẫn đến -onmousemove (kéo) sau đó -onmouseup (unbinds onmousemove)

vấn đề là, giá trị mặc định trình duyệt bắt đầu đánh dấu onmousemove, mà bay khắp nơi trang và hủy sự kiện, khiến nó không sử dụng được. bất kỳ ý tưởng làm thế nào để ngăn chặn làm nổi bật, cho preventDefault dường như không được làm việc. đây là mã của tôi (có nó rất cẩu thả, xin lỗi!)

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

Bạn có thể vô hiệu hóa làm nổi bật bằng 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; 

một cách khác để làm điều này là để xóa lựa chọn về sự kiện thả, như vậy:

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

Vì vậy, bạn sẽ gọi clearSelection() trên thả sự kiện (sau khi kéo xong)

Answer 2

add 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*/