suchit suchit - 3 months ago 7
CSS Question

How to check if one div overlapped another during transition from one position to another



$(document).ready(function() {
$( function() {
$('#executeButton').click(function() {
test();
});
function coords(dx, dy) {
var cx = document.getElementById('block').style.marginLeft;
var cy = document.getElementById('block').style.marginTop;
cx = parseInt(cx) + 40 * dx;
cy = parseInt(cy) + 40 * dy;
if (cx < 0) cx = 0;
if (cy < 0) cy = 0;
if (cx > 360) cx = 360;
if (cy > 360) cy = 360;
document.getElementById('block').style.marginLeft = cx + 'px';
document.getElementById('block').style.marginTop = cy + 'px';
}

function test(){
move(4);
setTimeout(move, 2000, 4);
placePostion();
setTimeout(move, 4000, 4);
placePostion();
setTimeout(move, 6000, 2);
placePostion();
setTimeout(move, 8000, 2);
placePostion();
}

function move(id) {
if (id == '1') {
coords('0','-1');
} else if (id == '2') {
coords('0','1');
} else if (id == '3') {
coords('-1','0');
} else if (id == '4') {
coords('1','0');
}
}

function placePostion() {
var block = $('#block').position();
var dest = $('#dest').position();
if (block.top == dest.top && block.left == dest.left) {
alert("reached");
}
}

});
});

#panel {
width: 100%;
height: 100%;
border-style: solid;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
#game {
width: 400px;
height: 400px;
background-image: linear-gradient(transparent 39px, #888 39px, transparent 40px), linear-gradient(90deg, transparent 39px, #888 39px, transparent 40px);
background-size: 40px 40px, 40px 40px;
border-style: solid;
float: left;
margin-right: 10px;
}


#block {
width: 40px;
height: 40px;
float: left;
transition: 1s;
background-color: red;
outline: 1px solid;
}

#dest {
width: 40px;
height: 40px;
background-color: blue;
outline: 1px solid;
}

#character {
width: 50px;
height: 50px;
outline: 1px solid;
float: left;
background-color: red;
transition: 1s;
}

<html>
<head>
<link rel="stylesheet" href="movefunction.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="movecharacter.js"></script>
</head>
<body>
<button id="executeButton">Execute</button>
<div id="panel">
<div id="game">
<div id="block" style="margin-left: 40px; margin-top: 40px;">
</div>
<div id="dest" style="margin-left: 160px; margin-top: 120px;">
</div>
</div>
</div>
</body>
</html>





I have added the snippet. Here when the red block reaches the blue block, it should say the alert whereas currently its behaving like they are having the same position from the start itself. It should actually move and when it reaches the blue block then only it should say reached. For different final position it should not display anything.

Answer
  1. You need to put placePostion inside the setTimeout too, otherwise it will be executed directly and not get the correct positions.
  2. You need to use offset instead of position.
  3. Because your block is floated you need to add the height to the offset top too.

$(function() {
  $(function() {
    $('#executeButton').click(function() {
      test();
    });

    function coords(dx, dy) {
      var cx = document.getElementById('block').style.marginLeft;
      var cy = document.getElementById('block').style.marginTop;
      cx = parseInt(cx) + 40 * dx;
      cy = parseInt(cy) + 40 * dy;
      if (cx < 0) cx = 0;
      if (cy < 0) cy = 0;
      if (cx > 360) cx = 360;
      if (cy > 360) cy = 360;
      document.getElementById('block').style.marginLeft = cx + 'px';
      document.getElementById('block').style.marginTop = cy + 'px';
    }

    function test() {
      move(4);
      placePostion();

      setTimeout(function() {
        move(4);
        placePostion();
      }, 2000);
      
      setTimeout(function() {
        move(4);
        placePostion();
      }, 4000);

      setTimeout(function() {
        move(2);
        placePostion();
      }, 6000);

      setTimeout(function() {
        move(2);
        placePostion();
      }, 8000);

    }

    function move(id) {
      if (id == '1') {
        coords('0', '-1');
      } else if (id == '2') {
        coords('0', '1');
      } else if (id == '3') {
        coords('-1', '0');
      } else if (id == '4') {
        coords('1', '0');
      }
    }

    function placePostion() {
      var block = $('#block').offset();
      var dest = $('#dest').offset();
      
      if (block.top + $('#block').height() == dest.top && block.left == dest.left) {
        alert("reached");
      }
    }

  });
});
#panel {
  width: 100%;
  height: 100%;
  border-style: solid;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
}
#game {
  width: 400px;
  height: 400px;
  background-image: linear-gradient(transparent 39px, #888 39px, transparent 40px), linear-gradient(90deg, transparent 39px, #888 39px, transparent 40px);
  background-size: 40px 40px, 40px 40px;
  border-style: solid;
  float: left;
  margin-right: 10px;
}
#block {
  width: 40px;
  height: 40px;
  float: left;
  transition: 1s;
  background-color: red;
  outline: 1px solid;
}
#dest {
  width: 40px;
  height: 40px;
  background-color: blue;
  outline: 1px solid;
}
#character {
  width: 50px;
  height: 50px;
  outline: 1px solid;
  float: left;
  background-color: red;
  transition: 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>

<button id="executeButton">Execute</button>
<div id="panel">
  <div id="game">
    <div id="block" style="margin-left: 40px; margin-top: 40px;"></div>
    <div id="dest" style="margin-left: 160px; margin-top: 120px;"></div>
  </div>
</div>