Drag/Drop with Image Maps

[Adam]

Hi all,

Is it possible to use HTML area objects from an image map as
droppables for a drag/drop interface? I want to get a different
response depending on which part of an image I drop a draggable div
object on. The context is creating an incident report form where
injuries can be dragged onto a body sketch. I've tried this using the
code below. However, the droppable is always identified as
"front_head", the first area object, no matter which part of the image
is dropped on. Has anyone managed to get this working successfully, or
found a way to achieve a similar effect?

Many thanks,
Adam

<%= image_tag "body_sketch_front.gif", :usemap => "#front" -%>

<map id="front_map" name="front">
<area id="front_head" shape="circle" coords="100,30,20"
href="#" alt="head" title="head"></area>
<area id="front_torso" shape="rect" coords="70,70,120,150"
href="#" title="torso"></area>
</map>

<div id="injury_1" class="injury">punch</div>
<div id="injury_2" class="injury">kick</div>

<div id="description"></div>

<script type="text/javascript">
$$(".injury").each(function(el){
new Draggable(el,{revert:true});
})
$$('#front_map area').each(function(el){
Droppables.add(el,{
accept:'injury',
onHover:function(drag,drop){
// Some function to let us know what's
going on
$('description').innerHTML=drag.title
+ " on " + drop.title;
},
onDrop:function(drag, drop){
// Some function to respond to the
dropped injury
alert("Dropped "+drag.id+"on"+el.id)
}
})
})
</script>

[Diodeus]

Drag/Drop doesn't work to image maps.

Here's an idea:

You could set up a bunch of CSS cursors and use your draggable images
as the cursor, then just use the mouseover events of the image map
elements to figure out where to drop the image. This would probably
mean parsing your own image map coordinates to figure out the top-left
corner of the drop location. You would also need to set up some events
to handle the cursor if it leaves the image map. Having a lung
floating around as a cursor for the rest of the page would be really
messed up.

Yay, fun.

I would imagine it's all possible, but you'd have to hack it all
together yourself.