Draggable and Droppable Elements

Objective: Implement a UI where users can drag and drop boxes into a container.

Instructions:

1. Create a draggable UI with a set of boxes placed outside a container.
2. The container should have a 2x2 grid layout.
3. Users should be able to drag and drop the boxes into the container.

Requirements:

• The boxes should be draggable.
• The container should accept boxes dropped into it and maintain a grid layout (2x2).
• Make sure the drag-and-drop functionality is intuitive and works smoothly.

Hints:

1. Use dragstart, dragover, and drop events in JavaScript to handle the drag-and-drop functionality.
2. Ensure that the container keeps its 2x2 layout when the boxes are dropped into it.

Bonus:

• Implement a "snap to grid" feature, where the boxes automatically align to the nearest corner of the container when dropped.
• Make the boxes repositionable after being dropped into the container.
• Add info when a box is being dragged over the container (e.g., a highlight effect).