jQuery dragging divs selected text

问题

I'm using jquery to make a few divs draggable on a website. My code is similar to this:

$("#thediv").bind('mousedown',function(){
    $(document).bind('mousemove',function(ms){
      //drag
    })
});

The problem is that if the mouse is too fast for the div, the mouse goes outside of the div. This selects random content on the screen (highlights it blue). It does not give a smooth drag effect. Is there a nice way of fixing this? jQuery's ui drag plugin does not have this problem. I don't want to use it though because it is a large file.

Thanks

回答1:

To prevent selection of elements in page just return false from your functions (onmousedown, onmousemove). Also for this functionality you do not need jquery, simply use this pattern:

var mouseMove = function () {
    // move div
    return false;
}
var mouseUp = function () {
    document.onmousemove = null;
    document.onmouseup = null;          
}
var mouseDown = function () {
    document.onmousemove = mouseMove;
    document.onmouseup = mouseUp;
    return false;
}
div.onmousedown = mouseDown;

Don't forget return false from event function mouseMove to prevent default events;

回答2:

Also consider CSS:

#thediv {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
}

来源：https://stackoverflow.com/questions/1469756/jquery-dragging-divs-selected-text