图像映射上的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");
        }
    });

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