Jquery ui 可在图像地图上拖放的Jquery UI

我有一个图像地图定义如下

  <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>

当我拖放时，什么也没发生。 如果我拖放到一个我设置为可拖放的div，而该div不在图像映射中，那么它可以工作。当我把它放在图像地图区域时，它就不起作用了。 你有没有想过如何在图像地图区域这样做？

---

谢谢

您可以创建一个JSFIDLE示例吗？

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

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

    });

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