Is the "window" or so possible as a DragAndDrop Target?

Hi,

I like to add drag and drop support to the whole window of my webapp. Somehow I can only add the DnD listener to an element with an id. Any chance how I can achieve my goal?

Best regards,
Oliver

Yo Oliver!

what happens if you give the body an id and pass that?

lloyd

Lloyd,

this works basically and allows me to attach a DropTarget to the body. But sadly the body does not always cover the whole browser window, but only the part of the page that's actually used by the html document.

The DragAndDrop service works like a charm if I attach it to any kind of object with an id. But for my app I need the ability to drop files everywhere, and that is also what I think people would expect from it. Or at least, I like to live without this limiting aspect of it. Currently I am providing DragAndDrop upload of files in Firefox based on some XUL scripting.

Best regards,
Oliver

With body, html { height: 100% } this can be solved too. After that I can drop files everywhere, but somehow it is unsatisfying. :)lloyd

right, now that you mention it, I do recall body sizing typically scoped to displayable content. I guess another more explicit means of accomplishing this would be to have an invisible div that's absolutely placed and sized through css to be 100%. At least in this case it would be clearer upon casual inspection what the purpose is, and you wouldn't have to fiddle the body...

very best,
lloyd

Can you give me an example how you would configure such a div? Did you mean something like that?

#dropzone { position: fixed; top: 0; right: 0; width: 100%; height: 100%; }

Sorry, here I seem to be a bit confused. Mostly it works except it covers all my page elements, that are not on z-index: 1.

Best regards,
Oliver

Hey Oliver,

Lemme pass this one over to steve.. He's the ui wrangler of the group...

steve? halp!

lloyd

Here's an example of the fixed position / 100% css. I changed the z-index of one of the divs and it all appears to work. If you want the background color to change when you're hovering, then I find that you do need to set opacity.

Oliver, can you recreate what you're seeing with this demo?

http://hackthebrowser.org/u/steve/ex/dragdrop.html

Also, had the opportunity to meet John Allsopp today, who has authored this bookmarklet:
http://www.westciv.com/xray/

- "Use it to see the box model for any element on any web page."

awesome piece of work that may help us understand what's going wrong?

final thought, depending on the structure of your page and the browser you're testing on,
it may be the case that we have window stacking order issues, a problem related to the
way that we implemented the drag and drop interception stuff. We actually have an open
bug in this area, but in the off chance you have a concise code sample of what's not workin'
that'd be high value to us.

very best,
lloyd

Lloyd, I will prepare an example of what I want to achieve on the weekend and send you the link. So you might get an idea, and may you just have to tell me, that I am nuts. :)Steve

Ok, I get it. I added a link to my demo and can't click on it. Setting "myTarget" to z-index:-1 seems to do the trick.

So how about this:

CODE

  #myTarget {
        position:fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index:-1;
    }

Steve

Hm... okay. Somehow I erased negative z-index option from my brain some years ago. That actually works.

Thanks a lot!