title: drag drop element on image map get value
body: <p>I have a image map and want to drag and drop one element i.e. pin on Country Map. When the pin drops on map. I need that image map ID.</p>
  
  <pre><code>&lt;p id="draggable" style="position: absolute; bottom: 10px; left: 40px; cursor: move; z-index:100;"&gt;&lt;img src="images/pin1.png"/&gt;&lt;/p&gt;
  &lt;img src="image.gif" width="145" height="126" alt="Elements" usemap="#elementmap" /&gt;
      &lt;map name="elementmap"&gt;
      &lt;area id="element1"  class="droppable" shape="rect" coords="0,0,82,126" alt="Element 1"/&gt;
      &lt;area id="element2" class="droppable" shape="circle" coords="90,58,3" alt="Element 2"/&gt;
  &lt;/map&gt;
  </code></pre>
  
  <p>jQuery code is like this:</p>
  
  <pre><code>$("#draggable").draggable();
  $(".droppable").droppable({
      accept: '#draggable',
      activeClass: "ui-state-hover",
      hoverClass: "ui-state-active",
      drop: function (event, ui) {
          var targetElem = $(this).attr("id");
  
          var draggableId = ui.draggable.attr("id");
          var droppableId = $(this).attr("id");
  
          alert(targetElem);
          alert(draggableId);
          alert(droppableId);
  
      }
  });
  </code></pre>
  
  <p>Here is the jsFiddle example:
  <a href="http://jsfiddle.net/fguru/ZKQ2x/2/" rel="nofollow">http://jsfiddle.net/fguru/ZKQ2x/2/</a></p>
  
  <p>Is there any way around.</p>