Tony Bowden's Radio Weblog

Tony Bowden's Radio Weblog:

Updated: 03/05/2002; 15:16:57.

Home

TMtm

06 April 2002

Drag and Drop redux

It seems that each of the various drag and drop event handlers only know about either the object being dragged, or the area into which it's being dropped. Not both. This means that when dropping an object its receiver can't know what's arriving.

There is a dataTransfer object that can be seen by both ends, which acts as a clipboard onto which you can paste relevant information: but seemingly only either text or a URL (presumably for dragging text or images respectively) - not the object itself.

This means I've had to resort to the terrible hack:

  function makeMovable() {
    event.dataTransfer.setData("Text", event.srcElement.id);
    event.dataTransfer.setData("URL",  "http://ok/");
  }
  

  function dropItem() {
    if (! isMovable()) return;
    ...
  }
  

  function isMovable() {
    return ((event.dataTransfer.getData("URL") == "http://ok/")
              && event.dataTransfer.getData("Text"));
  }

[I tried just setting both and making sure both were set, but text dragged from an href has both set already :( ]

This can't be the best way to do this.

7:37:04 PM

Spend a few hours this afternoon playing with drag and drop in IE. There seems to be two main approaches. At JavaScriptKit they use onmousedown and onemouseup to grab elements with class=draggable and then dynamically change their x/y position.

This creates a better visual effect than the official Microsoft approach, which uses a variety of new eventhandlers. But the Microsoft way allows for more powerful scripting, as you get to call functions not just when you grab/drag/drop, but also as enter or leave a 'drop-zone'.

I can't decide yet which I prefer. I should probably look at ways to combine both.

4:22:44 PM