Drag and drop - QuirksBlog

A week ago I surprised myself by writing a simple drag and drop script in five minutes, without needing to debug even one single error. I enthousiastically started to write a QuirksMode page about it, until I realised that a mouse-only drag and drop script is distinctly old-fashioned these days.

Therefore I had to add keyboard compatibility, which took me five hours (mainly thanks to the confusing event situation.) Due to other pressing matters it took me five days to write the final version of the page.

The last time I worked on such a script was somewhere back in 2000. I'd decided to write the final, definitive cross-browser drag and drop script, spent days and days on it, but in the end had to give up because of Netscape 4 on Mac (you'll notice this is seriously ancient history). It was all the more galling because I had an example script that did work properly in NN Mac. From that day on I tended to avoid drag and drop scripts, and I've never even touched on from then until a week ago.

The ancient curse was broken when I wrote my new script within five minutes. In addition the new script gave me the chance to practice what I preach about JavaScript and accessibility, as well as learn to handle obnoxious key events.

Safari 2 tests

I hope someone can give this script a good test run in Safari 2, which I don't have available. I assume the script works, since it does in Safari 1.3 and 3, but it's always nice to have that assumption confirmed.

Besides, I'd like to know where Safari 2 stands in relation to the key events. Therefore I'd like to ask someone to copy the page and make the following changes to the script:

Comments

1 Posted by Thijs van der Vossen on 29 June 2007 | Permalink

Doesn't seem to work in Safari 2.

2 Posted by Alex Lein on 29 June 2007 | Permalink

Using FF2.0 I get a "removeEventSimple is not defined"
error.
From:
removeEventSimple(document,'mousemove',dragDrop.dragMouse);
--> dragdrop.html (line 156)

3 Posted by Jonathan Snook on 29 June 2007 | Permalink

It would seem that you've forgotten to add both the add an remove event functions on the page. It's not working at all for me.

4 Posted by Jonne on 29 June 2007 | Permalink

It doesn't seem to work for me either.
Mozilla/5.0 (X11; U; Linux i686; en-GB; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

5 Posted by Alex Robinson on 30 June 2007 | Permalink

It works just fine in Safari 2.04. Once you've added in the *EventSimple functions that is ;)

6 Posted by David G. Paul on 30 June 2007 | Permalink

Doesn't work for me either - I'm using Firefox 2.0.0.4 in Windows. Doesn't give any JavaScript errors, just doesn't do anything.

7 Posted by Fitness on 30 June 2007 | Permalink

for me also problem with Safari!

8 Posted by ppk on 30 June 2007 | Permalink

OK, sorry, I made a mistake. the add/removeEventSimple functions were supposed to be in my main JS file, but I forgot to upload it.

Please test again.

9 Posted by Joost Diepenmaat on 30 June 2007 | Permalink

Mouse drag & drop works fine now on Firefox 2.0.0.3 / linux x86 but none of the key bindings seem to do anything.

10 Posted by Harmen Janssen on 1 July 2007 | Permalink

Works fine in Firefox 2 on Mac.
Nice one :)

11 Posted by Fouad Masoud on 1 July 2007 | Permalink

Works well on IE7, FX2, Opera, Safari for windows.

IE6 has some troubles with the position: fixed.

but gr8 work there :)

12 Posted by jw on 1 July 2007 | Permalink

Why not use focus and blur to control the DragKeys? From a graphic design or usability point of view this seams to be easier to work with then having a visual button like the example '#' cluttering up the userinterface. A focussed dragable object could be nicely styled to make it recognisable as being 'in Drag'.

13 Posted by Sander on 1 July 2007 | Permalink

"A focussed dragable object could be nicely styled to make it recognisable as being 'in Drag'."

Yeah, like a wig and 2 inch chrome eye lashes ;-)

14 Posted by Daniel on 1 July 2007 | Permalink

Nice on FF2.0.0.4 and IE7 for XPSP2 :-)

Tomorrow I'll take a look at Safari/Mac...

15 Posted by Julien Nadeau on 2 July 2007 | Permalink

The script, unmodified, works in Safari 2.0.4 (build 419.3), both with the mouse and keyboard.

Removing the "addEventSimple(document,'keypress',dragDrop.switchKeyEvents);" line in the "startDragKeys" functions prevents proper dragging with the keyboard: the element only moves once, as in Safari 1.3.

Safari 2.0.4 also only recognizes the arrow keys with the 63232-5 key codes.

16 Posted by Joshua E Cook on 2 July 2007 | Permalink

In Saf 2, the z-index doesn’t behave as I would expect. If I drop the “position: absolute” box over top of the “position: fixed” box, the “position: absolute” box immediately jumps to the background.

I think that if multiple drag-and-drop objects are present, a click on one should bring it to the topmost z-index.

17 Posted by Alex Lein on 3 July 2007 | Permalink

Very nice script. I plan to use this in the next version of the web-software we publish.

A question: is there a reason you did not do the "keys" link differently (aka; using the element.*Child methods of the DOM)?

element.innerHTML += dragDrop.keyHTML;
element.lastChild.onclick = dragDrop.startDragKeys;
... and then ...
startDragKeys: function () {
dragDrop.startDrag(this.parentNode);

Wouldn't this be better, and remove a potential memory leak issue?