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('top')。

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

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

Answer 2

我试过这个var yPosition = parseInt($(this).css('top'))/parent.weight()*200;并且效果很好，现在我可以100％找到我的身高而没有任何问题。

x和y位置查找器JQuery JS

2 个答案: