javascript - x 和 y 位置查找器 JQuery JS

Question

我有一个脚本可以找到 x 和 y 位置。我可以毫无问题地找到 x 位置，但我的 y 位置似乎无穷大，我不明白为什么。这是我的脚本

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script language"javascript" type"text/javascript">

$(document).ready(function(){
  $(".view_parent_furnace_boiler").droppable();
});

    $(document).ready(function() {
    $(".device-container").draggable(
      {
      grid: [10, 10],
        containment: "#picture_container",
        revert: 'invalid',

        stop: function(){
($(".door").height() / 100)+"%");

            var elementName = $(this).attr('name');
            console.log(elementName);
            var elementID = $(this).attr('id');
            elementID = elementID.split(",");
            var parent = $(this).parent();

      /*finding the x and y position percentage based on the container*/
            var yPosition = parseInt($(this).css('top'))/parent.height()*100;
            var xPosition = parseInt($(this).css('left'))/parent.width()*100;
            console.log(xPosition); //displays without anyproblem
            console.log(yPosition); //does not work (infinity
            /*assigning the div id to variable for further display and debugging purpose*/
            for (var k = 0; k < elementID.length; k++) {
                var device_id = elementID[0];
                var command   = elementID[1];
                var map_id    = elementID[2];
            }

            /*assigining values to variables*/

            $('#'+elementName+'-device_id').val(device_id);
            $('#'+elementName+'-command').val(command);
            $('#'+elementName+'-map_id').val(map_id);
            $('#'+elementName+'-x_position').val(xPosition);
            $('#'+elementName+'-y_position').val(yPosition);

        },
        revert: 'invalid'
    });
}); 
</script>

这是我的CSS

<style type="text/css">
/* to display the boiler background picture*/
.view_parent_furnace_boiler {
 position: relative;
  background-position: relative;
  max-width: 100%;
  max-height: 100%;
  padding: 0em;
  margin: 0em;
  border-image-width: 5% 2em 10% auto;
  border: 3px solid #ccc;
  background:radial-gradient(circle, black, white);
}
.view_parent_furnace_boiler img {
  max-width: auto;
  max-height: auto;
}
.view_parent_furnace_boiler span {
  color: #000;
}
.btn-inhibited{
  background-color:#aaa;
  color:white;
}
.device-container {
  position: absolute;  /*could be relative*/
  cursor: move; 
}
</style>

Answer 1

尝试使用 jQuery $(this).offset().top 或 $(this).position().top 而不是 $(this) .css('顶部').

https://api.jquery.com/position/

https://api.jquery.com/offset/