Position of click within div

问题

I'm trying to get the position of a click inside a div so that when I position a window as the mouse drag moves it, the mouse cursor will be exactly on the spot (relative to the moving window) where the initial click occurred.

Here's the window:

<div id="PopUp" class="Popup">
  <div id="PopUpTitleBar"><img class="xOut" onclick="ClosePopUp();" src="/images/xOut.png"></div>
  <div class="InnerPopup">
    <!-- <p>Here is the body of a pop up element.</p> -->
    <p id="PopUpBody"></p>
  </div>
</div>

And I have these methods to handle the clicking and dragging:

    var firstClick = true;
    var offsetX = 0;
    var offsetY = 0;

    function mouseUp()
    {
        window.removeEventListener('mousemove', divMove, true);
        firstClick = true;
    }

    function mouseDown(e){
        window.addEventListener('mousemove', divMove, true);
    }

    function divMove(e){
        var div = document.getElementById('PopUp');

        if (firstClick == true) {
            offsetX = $('#PopUpTitleBar').offset().left;
            offsetY = $('#PopUpTitleBar').offset().top;
            firstClick = false;
        }

        var spotX = e.pageX - offsetX;
        var spotY = e.pageY - offsetY;

        div.style.top = spotY + 'px';
        div.style.left = spotX + 'px';
    }

This sorta works, except that my offsetX and offsetY are returning the position of the top left corner of PopUpTitleBar instead of the position of the click within PopUpTitleBar.

How can I correct this so my offsets are relative to the inside top left corner of PopUpTitleBar?

Thanks.

回答1:

You have the click position on the screen. And then you have the position of the div. Substract the main position with the div position and youll have the finger position relative to that div.

$('#PopUpTitleBar').click(function (e) {
    var posX = $(this).offset().left, posY = $(this).offset().top;
    alert("e.pageX: " + e.pageX + " posX:" + posX + " e.pageY:" + e.pageY + " posY:" + posY);
});

回答2:

This is what ultimately worked:

    function divMove(e){
        var div = document.getElementById('PopUp');
        var titleBar = document.getElementById('PopUpTitleBar');

        if (firstClick == true) {
            offsetX = e.pageX - $('#PopUpTitleBar').offset().left;
            offsetY = e.pageY - $('#PopUpTitleBar').offset().top;
            firstClick = false;
        }

        var spotX = e.pageX - offsetX;
        var spotY = e.pageY - offsetY;

        div.style.top = spotY + 'px';
        div.style.left = spotX + 'px';
    }

First, I calculate the position in the titlebar by subtracting the top left corner of the title bar from the point at which the first click occurred. Then, as the mouse moves, the subsequent positions of the mouse must all subtract that offset so that the top left corner remains the same distance from the original click. Thanks everyone for the suggestions - they helped me wrap my head around the problem better.

回答3:

To get the value of the Position of click within div use the event e parameter in your callback.

function divMove(e){
    var div = document.getElementById('PopUp');

    if (firstClick == true) {
        // use $(e).target
        offsetX = $( $(e).target ).offset().left;
        offsetY =  $( $(e).target ).offset().top;
        firstClick = false;
    }

    var spotX = e.pageX - offsetX;
    var spotY = e.pageY - offsetY;

    div.style.top = spotY + 'px';
    div.style.left = spotX + 'px';
}

来源：https://stackoverflow.com/questions/25855336/position-of-click-within-div