Implement Drag and Drop Feature for "Equipment" Minigame and Future Modules

[stapps21]

Description

We need to develop a drag and drop feature for the "Equipment" minigame, with potential for reuse in other Minigames - The functionality should be abstract enough to be adapted to different use cases in our application.

Requirements

1. Drag and Drop Capability: Users should be able to drag certain graphic items and drop them into designated areas.
2. Drop Logic:
   • Accepted Drop: When items are dropped into a valid area, an action should occur (e.g., the item could be permanently placed there, trigger other UI changes, etc.).
   • Rejected Drop: Items should return to their original position if the drop is not allowed (e.g., due to restrictions on where items can be placed).

Optional: Use of External Library

If there's an existing library that can simplify the implementation of this feature without being too heavy or complex, it should be considered. The library should be evaluated for:

• Compatibility with our current tech stack.
• Ease of integration and future maintenance.
• Performance implications, especially on mobile devices.

Example Implementation

An example should be implemented within the MinigameEquipment.vue component. This example will involve:

• Boxes as Draggable Items: There will be red and green boxes.
• Drop Target: A grey box located at the bottom of the screen.
• Drag and Drop Logic:
  • Green Boxes: These should be allowed to be dropped into the grey box. Upon a successful drop, print a message to the console (e.g., console.log("Green box dropped")).
  • Red Boxes: These can be dragged but should not be allowed to be dropped in the grey box. If attempted, they should animate back to their original position.