javascript - 为什么从可拖动的 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>