javascript - 带有链接区域的可拖动图像

Question

我知道我可以通过使用使图像可拖动$('#id').draggable();
但是如果图像包含一些链接区域，则这些区域不能用于拖动。有没有办法告诉 jQuery 在单击（应打开该区域的定义 url）和拖动（只需移动整个图像）之间有所不同？

Answer 1

我找到了实现目标的方法。
图像和区域的代码必须放在 div 内：

<div id="overlayDiv">
    <img id="overlayImage" src="/Content/images/Overlay.png" usemap="#overlayMap" />
    <map name="overlayMap" id="overlayMap">
        [some areas]
    </map>
</div>

然后你可以使 div 可拖动：

var stopPropagation = false;
$('body').mouseup(function () { stopPropagation = false; });
$('#overlayDiv').draggable({
    stop: function () {
        stopPropagation = true;
    }
});

因为我的区域没有定义 url 而只有 onclick-events，所以我可以检查 stopPropagation 变量并决定是否忽略点击。

Answer 2

似乎有一个选项可以防止#id 中的元素可拖动：http ://api.jqueryui.com/draggable/#option-cancel

将此应用于您的链接元素，它们将是可点击的。

$("#id" ).draggable({ cancel: "a" });

Answer 3

我认为这是不可能的，而且从你的 UI 角度来看也是不可取的。您无法判断用户已单击链接以“打开它”或“拖动它”。

因此，尝试更改链接上单击事件的默认行为会使用户感到困惑，这对用户体验不利。