Mind maps compiled for frontend interview preparation!

Implement a QQ-screenshot-like tool: click the load button to load an image, long-press on the image to bring up a cropping box, resize the cropping box from its bottom-right corner, and display a real-time preview in the preview area on the right.

Implement a 16-grid page as shown below, where each numbered box can be dragged and swapped with another. The horizontal and vertical header bars ABC and XYZ allow pairwise swapping of positions, causing entire columns (or rows) to swap together.