0

Please see my updated fiddle demo.

I able to get value when two box/div overlapped but when i do rotate the DIV then it still returns TRUE even though its not overlapping with another div/box. Below the collission method which returns true when two DIV overlapped but did not detect when rotate the div.

 function collision($div1, $div2) {
  var x1 = $div1.offset().left;
  var y1 = $div1.offset().top;
  var h1 = $div1.outerHeight(true);
  var w1 = $div1.outerWidth(true);
  var b1 = y1 + h1;
  var r1 = x1 + w1;
  var x2 = $div2.offset().left;
  var y2 = $div2.offset().top;
  var h2 = $div2.outerHeight(true);
  var w2 = $div2.outerWidth(true);
  var b2 = y2 + h2;
  var r2 = x2 + w2;
    
  if (b1 < y2 || y1 > b2 || r1 < x2 || x1 > r2) return false;
  return true;
}
user3731362
  • 71
  • 3
  • 13
  • 1
    Please don't ignore the rules of SO - links to jsfiddle must be accompanied by code in the question itself. Marking the link as code to circumnavigate this rule is really annoying as it not only violates the rule but makes the link not clickable – Pete Jun 19 '23 at 11:31
  • Frontend dev protips: Never tell a user to click somewhere else. _Link the text_. Then, [never link "click here"](https://www.smashingmagazine.com/2012/06/links-should-never-say-click-here/#here-conceals-what-users-are-clicking). – isherwood Jun 20 '23 at 13:17
  • The main problem is that the element box of a rotated element doesn't match its visual shape. See the linked duplicates. – isherwood Jun 20 '23 at 13:23
  • above mentioned 2 links dont have proper solutions.. – user3731362 Jun 20 '23 at 15:37

0 Answers0