Can one use javascript to sense if one <div> element is covering/over another

turgon

As I continue making a file manager system Im approched by a tricky problem. As in windows explorer etc I want users to be able to select any free space, click down, and drag a semi-transparent box around that will automaticly select any file/folder elements it covers over.

In a more general sense, take this tutorial page with the three movable objects. I can lift Item 1 and place it over Item 2. But can I use javascript now, so that it automaticly triggers a function because Item 2 is covering Item 1.

So basiccaly Im wondering is there any way to determine if one <div> is covering another?? Cheers for any ideas!

anton

I'm not quite sure that's the best approach, but you can do something like that: have a list of coordinates (of say top left corners) of your draggable elements. Once you know the size of your selection box, check if any of draggable items lie within that box.

Have a look at Dojo Toolkit / dojo.coords() http://api.dojotoolkit.org/jsdoc/dojo/1.2/dojo.coords

Also Dojo Toolkit has DnD API, it might be worth checking out: http://dojotoolkit.org/book/dojo-book-0-9/part-3-programmatic-dijit-and-dojo/drag-and-drop

turgon

anton wrote: »

I'm not quite sure that's the best approach, but you can do something like that: have a list of coordinates (of say top left corners) of your draggable elements. Once you know the size of your selection box, check if any of draggable items lie within that box.

Cheers for the reply.

Well thats what occured to me, the only problem is that the co-ordinates will have to be checked each time the mouse moves. If theres multiple elements on the page it could be quite slow in operation.

As a comprimise I will probably have it so the user will have to hold the box still for 100 or so milliseconds before comparisons will be made and elements selected. Its not ideal, but neither is javascript I suppose!!!