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.

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.

• javascript
• jquery
• html
• mouseevent

Share Improve this question Follow edited Sep 15, 2014 at 19:31 Hashem Qolami 99.6k2727 gold badges155155 silver badges165165 bronze badges asked Sep 15, 2014 at 19:19 Jon AJon A 37244 silver badges1414 bronze badges 1

• 1 I hate this type of problem. So much depends on styling. Check out offsetParent() api.jquery./offsetparent – iCollect.it Ltd Commented Sep 15, 2014 at 19:22

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 1

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.

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);
});

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';
}