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

Fadge

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.

Blaisdell

Answer 2

I’m not 100% sure if I got your question right. But I did two plugins which handle the cases you describe I think. They do not need any dependency, so no need for jQuery or what-so-ever. Even if you don’t use them, the code is well documented and should help you by writing your own.

For the drag and drop, there is dragNdrop
For the selection mechanic, there is DragSelect (v2 can now also handle drag and drop of the selected items)

You’re welcome. Hope that helps!

Gmt

Answer 3

Even though you desire to use jquery 1.5, I will still recommend checking out the jquery-ui Draggable option (from the way I am interpreting your desire this seems like what you are attempting to accomplish).

http://jqueryui.com/demos/draggable/

jquery-ui is always very fast to catch up with the newest release of jquery, and in a lot of cases will work fine. I have found that jquery-ui tends to stay up-to-date with jquery better than any of the other add-ons I have found.

With regards to wanting to know how this should be done, you can explore the uncompressed core of jquery rather easily. It is quite well documented and pretty straightforward to read.

Papaya

As to jquery-ui staying up to date with the core I have some concerns. It lags behind by two major releases (1.4 & 1.5) and it's been behind for at least a year from what I can recall. It seems 1.4 introduced so many changes that there isn't really anybody willing to update all that code. – Fadge