Question

我试图获取div内部点击的位置，这样当鼠标拖动移动它时，当我定位窗口时，鼠标光标将准确地位于当场（相对于移动窗口）发生了初始点击。

这是窗口：

<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>

我有这些方法来处理点击和拖动：

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

除了我的offsetX和offsetY返回PopUpTitleBar左上角的位置而不是PopUpTitleBar中的点击位置之外，这种方式有效。

如何更正这一点，以便我的偏移相对于PopUpTitleBar的左上角？

感谢。

Answer 1

您在屏幕上有点击位置。然后你有div的位置。使用div位置减去主要位置，你将获得相对于该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);
});

Answer 2

要获取div中click的位置值，请使用回调中的event e参数。

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

Answer 3

这最终起作用：

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

首先，我通过从第一次点击发生的位置减去标题栏的左上角来计算标题栏中的位置。然后，当鼠标移动时，鼠标的后续位置必须全部减去该偏移量，以使左上角与原始点击保持相同的距离。感谢大家的建议 - 他们帮助我更好地解决问题。

在div中单击的位置

3 个答案: