Help with my Drag Drop ( did it hit target? )

[JSProgramIA]

Ok, I am working on a bit of code to drag and drop a layer. I used the drag / drop library from

http://www.walterzorn.com

and it works great.

But I need a "SNAP BACK" feature. So I wrote it and incorporated it and it works fine.

Now I need to detect whether my dragLayer hit the dropLayer.

Here is my progress:

http://www.vinsonmediagroup.com/drag.html

As you can see the "snapping" works great. Does anyone know how to easily detect a "hit" ?

Thanks!

 

[theEclipse]

JSProgramIA-

Nice work on the dragging interface.

For collisions there are two ways to tackle the problem. You can use the dragged elem's top, left, width and height attributes to see if the element is actually over your target element. This is probably not what you want because then a user could accidently drop the "document" in the "trash" by just having a corner over the trash can elem.

The more user-friendly way of doing things is to detect where the mouse is during the drop event. If the mouse pointer is over the target element (using mouse coordinates and offsets) then it is a pretty good bet that the user wants to drop the document in the trash.

since you are already using the drag-drop library you should be able to use the built in functions getPageXY() and getCssXY() to retrieve information about the mouse position and your drop target location on the page.

Robert Carpenter
"Disobedience to conscience is voluntary; bad poetry, on the other hand, is usually not made on purpose." - C.S. Lewis (Preface to Paradise Lost)
ô¿ô

http://www.robertcarpenter.net

 

[LFI]

A suggestion, too, would be that when the item has hit the target, you highlight the target differently. This will show the user that it is "safe" to drop the dragged item without worrying about wasting time getting the item again if it were to snap back to its original location.

The dragging/snapping on your site looks cool, by the way. Nice!

Dave


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
O Time, Strength, Cash, and Patience!

 

[JSProgramIA]

Thanks guys. Appreciate the help.

Could anyone modify my example a bit to display an alert when the drag layer is dropped on the target? Even a simple example, such as what theElipse described in his first paragraph would be helpful at this point.

I'm sure it's simple, but some reason my brain is not comprehending this simple algorithm.

Thanks!

 

[JSProgramIA]

Ok I got it. Appears to be working now. THX!