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>
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Ruby on Rails: Talk" group.
To post to this group, send email to
rubyonrails-talk-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
To unsubscribe from this group, send email to
rubyonrails-talk-unsubscribe-/JYPxA39Uh5TLH3MbocFFw@public.gmane.org
For more options, visit this group at
http://groups.google.com/group/rubyonrails-talk?hl=en
-~----------~----~----~----~------~----~------~--~---