0

こんにちは、ホット セレクト ホット スポットの質問タイプ管理者の要件があり、そのホット スポットの場所をキャプチャする必要があります。ユーザー側では、クリックに基づいて、ユーザーのクリックが有効かどうかを確認する必要があります。位置を取得していますが、マウスダウン時にホットスポットのサイズを変更するという問題に直面しています

リンクを見つける

http://jsfiddle.net/sarath704/Ju5cA/1/

フィドルリンクを確認して、その画像の1つの画像を参照し、任意の位置をクリックして1回ドラッグします。一部を選択することを意味します。マウスをクリックしてドラッグしようとすると、サイズが変更されず、一度クリックしてサイズを変更しようとすると、正常に機能します。一度にクリックしてサイズを変更したい

var $hotspot = $('<div id="hotspot_' + spotCount + '"></div>').css({
    'position': 'absolute',
    'display': 'block',
    'left': (e.pageX - $(this).offset().left) - (e.data.x / 2),
    'top': (e.pageY - $(this).offset().top) - (e.data.y / 2),
    'height': e.data.y,
    'width': e.data.x,
    'background': 'url(' + config.icon + ')',
    'cursor': 'pointer'
}).resizable({
    handles: "n, e, s, w, se, sw, nw, ne"
}, {
    helper: "ui-resizable-helper"
});
simulateHandleClick($hotspot, 's', e.pageX, e.pageY);
$hotspot.draggable();

$imageContainer.append($hotspot);


$hotspots = $hotspots.add($hotspot);

$hotspot.on('click', initSpotConfig);
}



var simulateHandleClick = function (item, handle, x, y) {

    item.find('.ui-resizable-' + handle).trigger({
        type: 'mousedown',
        which: 1,
        pageX: x,
        pageY: y
    })
4

0 に答える 0