Not selectable HTML, with exceptions

[Sarkast]

Hi there,

I have a quick, but apparently quite complicated question.

I want my whole site to be unselectable, with a few exceptions. Unfortunatly I am not able to do this.

I have a semi working versions, with onselectstart="return false" in the body tag, but then I can't select anything. I also have a version with a function which iterates over the whole HTML and makes everything with "unselectable" in the class name unselectable by:

function unselectElement(element) {
    element.style.MozUserSelect='none';
    element.style.KhtmlUserSelect='none';
    element.unselectable='on';
    element.onselectstart = function(){return false;};
}

However, this application is extremy AJAX heavy and updated elements loose those assigned attributes/events. I'm using wicket where I would have to append javascript all the time for every single element which appears to be extremly tedious and requires resturucturing of the code as well. (if you have a good solution in this regard, tell me).

Unfortunatly I can't let the "unselectAll" function run after every ajaxrequest, because it's just to slow.

Ideally I could specify that the whole document is unselectable and turn it on for the few elements I want the user to select. Preferably with CSS; but apparently this isn't possible.

An IE-only solution is okay right now, but cross browser solution would be awesome (FF and IE at least).

The reason for this functionality is mostly that I have a lot of dragable objects, which causes a bunch of elements in the background to be selected which looks more than ugly and is confusing for the user. I toy with a "body = unselectable" solution when something is dragged, but it's more of a last resort.

Help would really be much appreciated.

- Tom

[acoder]

Instead of making the whole page non-selectable, why not prevent the dragging of those elements only? That should solve this problem unless I've missed something. In your drag event handler, just check that only the correct elements/objects are allowed to be dragged.

[mrhoo]

To prevent the body (or other container) content from being selected when you drag an item, stop the mousedown and mousemove events from bubbling up to the body.

Add the event stopping code at the end of the handlers:

function dragmove(e){
    e=window.event || e;
    // run your dragging code 
 
    event.cancelBubble= true;     //ie
    if(e.stopPropagation) e.stopPropagation();     //others
}