Collision detection of rectangles in JavaScript----calculating the area of the collision section

Today in doing a drag-and-drop to change the ordering of things, when the dragged element at the same time collision to two elements, exactly which element should be swapped with the position of the problem, tangled to collapse, it is not to think of other ways to do, can only be calculated to calculate the area of the collision.

This should not be the most appropriate way, how to more appropriate, the follow-up found to fill it up.

First of all, we heard from the wonderful class. The method of judging collision detection by nine Gongge

, the left side of the Orange Arrow refers to the line, is the blue rectangle to the right and the black rectangle to the left of the distance, if the blue rectangle to the right of the left is less than the left side of the black rectangle, then two rectangles can not collide, it is impossible to collide with the range of blue lines circled.

In the same way, you can judge the other 4 areas to get a collision.

This approach is very simple in detecting collisions, but it is too cumbersome to judge the area of the collision.

This method of collision detection is also feasible in the calculation of the insertion position, if the object is to be inserted by dragging and dropping. Determine the size of the top value of two rectangles.

If you want to calculate the area is convenient, personally feel that the following method will be more appropriate.

The position of the two rectangular diagonal intersections can be calculated, and if the absolute distance between the two two directions is less than half the width of the two rectangle or half of the height, it proves that two rectangles have collided. The formula is written on the picture.

How does that area count?

Such as

In the picture said should have been relatively clear, writing is not laborious, will not repeat.

Collision detection is a very complex topic, rectangular, circular, 2d,3d, complex shape collisions, really need a lot of thinking and collecting methods of detection, in different situations in different ways.

Collision detection of rectangles in JavaScript----calculating the area of the collision section