JavaScript Drag & Select functionality done right

Question

I'm trying to write a drag & select functionality using HTML & JavaScript. By that I mean that there will be a set of objects with arbitrary absolute positions. I want to be able drag the cursor over the area where they are laid out. Think of it as an RTS strategy (selecting units) or alternatively any vector graphics editor (selecting objects for moving them around and editing).

First of all I'm aware of things that come up in the first few pages of Google & SO. Therefore I'm by no means asking for googling those things for me and posting here some random links.

Most of the solutions that I was able to find are in some way flawed. The main problem is suppressing actual text selection, which seems kind of against the very nature of a web browser. Some of the code snippets cause selection twinkling that I find very annoying. Some don't behave well across all the major browsers.

I'm asking for recommendations of code/libraries that you actually used, or seen successfully used.

The second thing is, that I'd like to actually understand the internals of JavaScript behind suppressing selection. How should it be done in theory. Is there any non-hackish way of achieving that?

The closest that I was able to find is this: http://view.jquery.com/tags/ui/1.5b2/demos/ui.selectable.html

However it seems to be tightly coupled with jQuery UI, which in turn requires jQuery 1.3.x whereas I was really looking forward to using jQuery 1.5

Answer 1

The main problem is suppressing actual text selection, which seems kind of against the very nature of a web browser.

The function you are looking for is e.preventDefault();

$("#inputform").mousedown(function(e){
    e.preventDefault();
    //console.log('mousedown');
}).mouseup(function(e){
    e.preventDefault();
    //console.log('mouseup');
});

This just solves the problem of text selection. I can see various drag-select js scritps across the web but somehow I am unable to make them work.