Algorithm used to determine whether two page elements overlap

Project Background:

The page displays a group of Scattered pictures around a cell phone screen.

The customer needs to drag each scattered image to the screen image of the mobile phone and automatically open the corresponding page.

 

Based on the above project requirements, you need to solve a problem, that is, how to determine whether the specified two images overlap.

The core code is as follows:

// Hotarea is the id of the mobile phone screen image, that is, the target element id.

// This is the currently dragged image element.

Var offset_target = $ ("# hotarea"). position ();
Var target_width = $ ("# hotarea"). width ();
Var target_height = $ ("# hotarea"). height ();

Var offset_c = $ (this). position ();
Var c_width = $ (this). width ();
Var c_height = $ (this). height ();

// Determine whether x coordinates overlap. The element width must be considered.
Var xmerge = judgemerge (offset_target.left, offset_target.left + target_width, offset_c.left, offset_c.left + c_width );
// Determine whether y coordinates overlap. The element height must be considered.

Var ymerge = judgemerge (offset_target.top, offset_target.top + target_height, offset_c.top, offset_c.top + c_height );

If (xmerge & ymerge ){

// If the x and y coordinates overlap, the two elements overlap.

}

Bytes --------------------------------------------------------------------------------------------------------

// Determine the overlap algorithm. You need to input the x/y coordinate range of the target element and the x/y coordinate range of the current element.
Function judgemerge (target_min, target_max, c_min, c_max ){
If (c_min> target_min & c_min <target_max) {// whether the minimum value is within the coordinate range of the target Element
Return true;
} Else if (c_max> target_min & c_max <target_max) {// whether the maximum value is within the coordinate range of the target Element
Return true;
} Else if (c_min <target_min & c_min <target_max & c_max> target_min & c_max> target_max ){

// Whether the current element coordinate range includes the coordinate range of the target Element
Return true;
} Else {
Return false;
}
}