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

Draggable image with link-areas

本文关键字：拖动 图像 区域 链接      更新时间：2023-09-26

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

我找到了实现目标的方法。
图像和区域的代码必须放置在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变量并决定是否忽略点击。

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

应用到你的链接元素，它们将是可点击的。

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

我认为这是不可能的，而且从UI的角度来看也不可取。你没有办法告诉用户点击链接是"打开它"还是"拖动它"。

所以试图改变链接上点击事件的默认行为会让用户感到困惑，这不利于用户体验。

相关文章：