50Projects-HTML-CSS-JavaScript : Drag and Drop App

[tajulafreen]

Title: Add Drag and Drop Functionality for Task Lists

Description:

This PR adds a drag-and-drop feature to a simple task list application, where users can move items between two lists. The drag-and-drop functionality is implemented using the native HTML5 Drag and Drop API, and the application is styled using CSS for better user interaction.

Changes Made:

• Created two task lists with draggable items inside each list.
• Included basic structure for task list containers.
• Styled the task lists with Flexbox layout to display side-by-side.
• Added hover and dragging effects on list items for better visual feedback.
• Styled lists with a dashed border when an item is dragged over them.
• Implemented the drag-and-drop functionality using event listeners (dragstart, dragend, dragover, dragenter, dragleave, drop).
• Added a class (dragging) to items while they are being dragged.
• Allowed items to be dropped into a different list, updating the UI accordingly.

Features:

• Users can drag items from one list to another.
• Items are visually represented with a background change on hover and a dashed border when a valid drop target is hovered.
• Simple, interactive task list with smooth drag-and-drop behavior.