Получение координат мыши относительно диалогового окна jQuery, а не области просмотра? - PullRequest
Новая
       19

Получение координат мыши относительно диалогового окна jQuery, а не области просмотра?

2 голосов
/ 03 апреля 2012

У меня есть следующий бит кода, который отвечает за отображение всплывающей подсказки. Я недоволен этим кодом по двум причинам:

  • Я использую "магические числа" pageXOffset и pageYOffset для исправления визуального состояния браузера.
  • Диалоговое окно должно оставаться постоянным, чтобы числа были правильными.

Я попытался привязаться к событию mousemove диалогового окна вместо документа. Результаты были идентичны моей текущей реализации, которая связана с движением мыши по документу. 

var shouldDisplay = false;
$(document).mousemove(AdjustToolTipPosition);

function DisplayTooltip(tooltip_text) {
    shouldDisplay = (tooltip_text != "") ? true : false;
    if (shouldDisplay) {
        $('#CustomTooltip').html(tooltip_text);
        $('#CustomTooltip').show();
    }
    else {
        //Sometimes the tooltip hasn't finished fading in before we ask to hide it. This causes it to hide, then fade back in.
        $('#CustomTooltip').hide();
    }
}

function AdjustToolTipPosition(e) {
    if (shouldDisplay) {
        //msie e.page event should be standardizes, but seems to go awry when working inside of a modal window.
        var pageYOffset = $.browser.msie ? 260 : 572; //-314
        var pageXOffset = $.browser.msie ? 474 : 160; //+314

        $('#CustomTooltip').css('top', e.pageY - pageYOffset + 'px');
        var offsetLeft = e.pageX - pageXOffset;
        var isOutsideViewport = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width() - offsetLeft < 0;

        //Prevent the tooltip from going off the screen by changing the offset when it would go off screen.
        if (isOutsideViewport) {
            offsetLeft = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width();
        }

        $('#CustomTooltip').css('left', offsetLeft + 'px');
    }
}

// Initialize the Historical Chart dialog.        
$('#HistoricalChartDialog').dialog({
    autoOpen: false,
    buttons: {
        'Close': function() {
            $(this).dialog('close');
        }
    },
    hide: 'fold',
    modal: true,
    draggable: false,
    resizable: false,
    position: 'center',
    title: 'Historical Charts',
    width: 700,
    height: 475
});

Я предоставляю инициализатор диалога jQuery только ради этого. Подсказка отображается только внутри этого диалогового окна, но координаты указаны для всей страницы. Можно ли получить координаты относительно диалогового окна, чтобы я мог использовать тот факт, что перемещение мыши в jQuery стандартизирует координаты со свойствами pageX и pageY?

РЕДАКТИРОВАТЬ решение: 

//Seperate file because the offsets are different for the image under MVC.
var shouldDisplay = false;
$("#HistoricalChartDialog").mousemove(AdjustToolTipPosition);

function DisplayTooltip(tooltip_text) {
    shouldDisplay = (tooltip_text != "") ? true : false;
    if (shouldDisplay) {
        $('#CustomTooltip').html(tooltip_text);
        $('#CustomTooltip').show();
    }
    else {
        //Sometimes the tooltip hasn't finished fading in before we ask to hide it. This causes it to hide, then fade back in.
        $('#CustomTooltip').hide();
    }
}

function AdjustToolTipPosition(e) {
    if (shouldDisplay) {
        var xPos = e.pageX - $(this).closest('.ui-dialog').offset().left + 15;
        var widthDifference = $(this).width() - $("#CustomTooltip").width();
        //Prevent the tooltip from going off the screen by changing the offset when it would go off screen.
        xPos = (widthDifference - xPos < 0) ? widthDifference : xPos;
        $('#CustomTooltip').css('left', xPos + 'px');

        var yPos = e.pageY - $(this).closest('.ui-dialog').offset().top - 10;
        $('#CustomTooltip').css('top', yPos + 'px');
    }
}

1 Ответ

2 голосов
/ 03 апреля 2012

Чтобы получить положение мыши относительно определенного div, а не области просмотра, вы берете событие X / Y и вычитаете левое / верхнее положение div: 

$("#example").mousemove(function(e) {
    var xPos = e.pageX - $(this).position().left;
    var yPos = e.pageY - $(this).position().top;
    $("#pos").text("x: " + xPos + " / y: " + yPos);
});

Пример fiddle

Учитывая ваш пример, это должно работать.Вам, возможно, придется взглянуть на свою isOutsideViewport логику. 

function AdjustToolTipPosition(e) {
    if (shouldDisplay) {
        var xPos = e.pageX - $(this).position().left;
        var yPos = e.pageY - $(this).position().top;

        var isOutsideViewport = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width() - xPos < 0;
        if (isOutsideViewport) {
            offsetLeft = $("#HistoricalChartDialog").width() - $("#CustomTooltip").width();
        }

        $('#CustomTooltip').css({
            'top': yPos + 'px',
            'left': xPos + 'px'
        });
    }
}
...