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 w

Answer 1

Sorry about my english. I'm using this library for drag/drop and it's great. Not sure if it's what you need, but it could help:

http://threedubmedia.com/code/event/drop/demo/selection

http://threedubmedia.com/code/event/drag

http://threedubmedia.com/code/event/drop

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

You’re welcome. Hope that helps!

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.

Answer 4

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.