jquery - 在图像 map 上拖放元素获取值

Question

我有一张图像 map ，想要拖放一个元素，即固定在国家/地区 map 上。当图钉落在 map 上时。我需要该图像映射 ID。

<p id="draggable" style="position: absolute; bottom: 10px; left: 40px; cursor: move; z-index:100;"><img src="images/pin1.png"/></p>
<img src="image.gif" width="145" height="126" alt="Elements" usemap="#elementmap" />
    <map name="elementmap">
    <area id="element1"  class="droppable" shape="rect" coords="0,0,82,126" alt="Element 1"/>
    <area id="element2" class="droppable" shape="circle" coords="90,58,3" alt="Element 2"/>
</map>

jQuery 代码是这样的:

$("#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);

    }
});

这是 jsFiddle 示例: http://jsfiddle.net/fguru/ZKQ2x/2/

有什么办法吗？

Answer 1

http://www.w3schools.com/html/html5_draganddrop.asp

尝试将 draggable="true" 属性添加到您的 img 标签