为什么从可拖动的jQuery中得到错误的左和上位置值

Question

我得到div的左位置和顶部位置，但是当顶部变为负值时我得到错误的值，那么显示的结果是错误的。和左一样。我在此代码中做错什么。

$('#mega-game').draggable(
    {
        drag: function(){
            var offset = $(this).offset();
            var xPos = offset.left;
            var yPos = offset.top;
            $('#mega-p-x').text('x: ' + xPos);
            $('#mega-p-y').text('y: ' + yPos);
            $('.man').css('top', yPos + 'px');
            $('.man').css('left', xPos + 'px');
        }
    });

#mega-game {
    width: 6em;
    height: 6em;
    padding: 0.5em;
    border: 3px solid #ccc;
    border-radius: 0 1em 1em 1em;
}
.man{
width: 2em;
height: 2em;
background:red;
position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="mega-game">
    <ul>
        <li id="mega-p-x"></li>
        <li id="mega-p-y"></li>
    </ul>
</div>
<div class="man"></div>

Answer 1

我猜想.offset()方法会稍微延迟地获取元素的位置，或者在位置更改之前触发了drag事件。您应该从drag回调参数中获取位置值。查看固定代码段：

$('#mega-game').draggable(
    {
        drag: function(e, ui){
            var offset = $(this).offset();
            var xPos = ui.position.left;
            var yPos = ui.position.top;
            $('#mega-p-x').text('x: ' + xPos);
            $('#mega-p-y').text('y: ' + yPos);
            $('.man').css('top', yPos + 'px');
            $('.man').css('left', xPos + 'px');
        }
    });

#mega-game {
    width: 6em;
    height: 6em;
    padding: 0.5em;
    border: 3px solid #ccc;
    border-radius: 0 1em 1em 1em;
}
.man{
width: 2em;
height: 2em;
background:red;
position:relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id="mega-game">
    <ul>
        <li id="mega-p-x"></li>
        <li id="mega-p-y"></li>
    </ul>
</div>
<div class="man"></div>