jquery-ui - Jquery UI Droppable 在图像地图上

Question

我有一个定义如下的图像映射

  <img src="../../Content/Images/Mapimage.png"  usemap="#Map" />
        <map name="Map">
            <area id="s1" shape="rect" coords="200,45,270,105"/>
            <area id="s2" shape="rect" coords="215,275,280,335"/>
            <area id="s3" shape="rect" coords="110,270,180,335"/>
        </map>

和一个可拖动的图像

 <img src="../../Content/Images/image1.png" id="draggableImage"/>

和jQuery

      $("#draggableImage").draggable({
        helper: 'clone',
        appendTo: 'body',

    });

     $("#s1").droppable({
        drop: function (event, ui) {
            alert("Got it");
        }
    });

当我拖放时没有任何反应。如果我拖放到我已设置为可放置但不在图像映射中的 div 上，则它可以工作。当我放在图像地图区域时，它只是不起作用。任何想法如何在图像地图区域上执行此操作？谢谢！