0

を使用して画像をドラッグ可能にすることができることは知っていますが$('#id').draggable();
、画像にいくつかのリンク領域が含まれている場合、これらの領域をドラッグに使用することはできません。クリック（この領域に定義されたURLを開く必要があります）とドラッグ（画像全体を移動するだけ）を区別するようにjQueryに指示する方法はありますか？

4

3 に答える 3

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変数を確認して、クリックを無視するかどうかを決定できます。

于 2013-01-15T15:39:42.167 に答える
0

#id内の要素がドラッグ可能になるのを防ぐことができるオプションがあるようです：http：//api.jqueryui.com/draggable/#option-cancel

これをリンク要素に適用すると、クリック可能になります。

$("#id" ).draggable({ cancel: "a" });
于 2013-01-15T13:01:45.710 に答える
0

これは不可能だと思いますし、UIの観点からも好ましくないと思います。ユーザーがリンクをクリックして「開く」または「ドラッグする」ことを確認する方法はありません。

そのため、リンクのクリックイベントのデフォルトの動作を変更しようとすると、ユーザーが混乱します。これはユーザーエクスペリエンスに適していません。

于 2013-01-15T14:29:54.093 に答える