How can I disable Text Selection temporarily using JavaScript?

Question

this is a bit of a specific question so I'll get right to the point.

I'm working on a short and simple drag and drop routine for part of a web application, and although the dragging and dropping bit works fine, the site goes all ugly-tastic during the operation because the browser still does the default operation and works on text selecting.

I've tried a few solutions mainly involving returning false from the mousedown or click events, and although they disable text selection in some browsers, they also seem to disable the mouseup event entirely, ruining the "drop" bit of the script and leaving this perma-floating icon hanging around the mouse-- not fun.

I don't really want text selection to be gone entirely, I just want to suggest that the browser... not do it while dragging, if that makes sense. Since I know the area that is affected (there are iframes involved) I can easily apply a property to the affected elements, etc. I can post code if necessary, but I'm looking for more of a general solution. Since this is an aesthetics thing only, I'm looking for a fix that works in most browsers, it's not really that crucial.

Thanks!

Answer 1

In W3C browsers, you can call the preventDefault method on the event object. The IE equivalent is to set the returnValue to false.

function stopDefault(e) {
    if (e && e.preventDefault) {
        e.preventDefault();
    }
    else {
        window.event.returnValue = false;
    }
    return false;
}

EDIT: Just re-read the question and you might also want to prevent the default action in the part of your code that handles the actual dragging, and not just at the initial mousedown or click.

Answer 2

as far I know, dragged element must be positioned over other elements under mouse pointer. If it will moving with the mouse pointer, it prevent any selections on the page.