Question

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

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;
    }
});

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

Answer 2

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

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

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

Answer 3

我认为这是不可能的，也不会优先考虑你的UI点。您无法判断用户是否已点击“打开”或“拖动”链接。

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

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

3 个答案: