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

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


});

 });

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

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


});

 });

• javascript
• jquery
• events
• drag-and-drop

2 Answers 2

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;

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

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

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