jquery ui - drag and drop function in combination with html area map

jquery ui - drag and drop function in combination with html area map

I am using the drag and drop from jQuery UI.
And want to use this along a map in my html.
When someone drops the item on an area on the image I would like to see a particular function is executed.

With normal DIV's and ID's this is working.
So for example:

  1. <div id="draggable">
  2. <!-- the ball is 32x32px -->
  3. <img src="ball.png" />
  4. </div>
  5. <div id="droppable1" class="ui-widget-header">
  6. <p>Drop here 1</p>
  7. </div>

In this case when my ball is dragged into the div droppable1 the function connected to this id is executed.

  1. $( "#droppable1" ).droppable({
  2. drop: function( event, ui ) {
  3.    // Limesurvey action
  4. $( '#answer36355X25X471A1' ).attr('checked', true);
  5. }
  6. });

I would like to achieve the same with the area in my map.
But I can't get it working.

I have tried to add a div around the <div id="droppable1"><area /><div>
Also when adding the id to the area itself it is not working. 

How can I add the function from droppable1 to the area so that when I drag and drop my item on it, the function will be executed?

  1. <img src="test.png" width="396" height="512" border="0" usemap="#map" />
  2. <map name="map">
  3. <area shape="poly" coords="2,486,184,1,2,0" alt="just an area" />
  4. </map>