【发布时间】：2013-07-09 19:46:47
【问题描述】：
我有一张图片地图，想拖放一个元素，即在国家地图上钉住。当图钉落在地图上时。我需要那个图像地图 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/
有什么办法吗。
【问题讨论】：
-
您的警报结果如何？
-
没什么，看起来它甚至没有进入可放置功能。我尝试了悬停功能，它工作正常。 （只是为了检查身份证）。 $('.droppable').hover( function () { alert($(this).attr('id')); }, function () { } );
-
奇怪，你的代码在我的系统上运行。您确定包含正确的 jQuery 库吗？ Firebug/F12 没有错误？
-
我可以看看 jsfiddle 吗？
-
我将您的
map/area替换为div、jsfiddle.net/abfnL。也许您可以先尝试一些不同的嵌套div's？