Making things unselectable in IE

Question

Here is my chart I've been writing in JS:

http://jsfiddle.net/49FVb/

The css:

-moz-user-select:none;
-khtml-user-select: none;

Works fine for Chrome/FF, but in IE all the elements are still selectable which looks weird when dragging the bars around.

How can I make this unselectable in IE?

Answer 1

In IE, you need the unselectable attribute in HTML:

<div id="foo" unselectable="on">...</div>

... or set it via JavaScript:

document.getElementById("foo").setAttribute("unselectable", "on");

The thing to be aware of is that the unselectableness is not inherited by children of an unselectable element. This means you either have to put an attribute in the start tag of every element inside the <div> or use JavaScript to do this recursively for an element's descendants:

function makeUnselectable(node) {
    if (node.nodeType == 1) {
        node.setAttribute("unselectable", "on");
    }
    var child = node.firstChild;
    while (child) {
        makeUnselectable(child);
        child = child.nextSibling;
    }
}

makeUnselectable(document.getElementById("foo"));