為什么從可拖動的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-px"></li> <li id="mega-py"></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-px"></li> <li id="mega-py"></li> </ul> </div> <div class="man"></div>