Interactive Task List with Drag and Drop Functionality

This challenge asks you to build a simple task list application where users can add, delete, and reorder tasks using drag-and-drop functionality. Implementing a drag-and-drop interface is a common requirement in web applications, and this exercise will help you understand the core concepts of event handling, DOM manipulation, and coordinate tracking. The goal is to create a user-friendly and interactive experience.

Problem Description

You are tasked with creating a basic task list application with drag-and-drop reordering capabilities. The application should consist of a list of tasks, each displayed as a separate element. Users should be able to:

1. Add Tasks: Provide an input field and a button to add new tasks to the list. New tasks should be appended to the bottom of the list.
2. Delete Tasks: Each task element should have a "Delete" button. Clicking this button removes the corresponding task from the list.
3. Drag and Drop Reordering: Users should be able to drag and drop tasks to reorder them within the list. The list should visually update as the user drags a task. When the user releases the mouse button, the task should be placed in its new position.
4. Visual Feedback: Provide clear visual feedback during the drag operation. This could include changing the cursor, highlighting the task being dragged, or indicating potential drop zones.

Key Requirements:

• The application should be implemented using vanilla JavaScript (no external libraries like jQuery).
• The task list should be dynamically updated based on user interactions.
• The drag-and-drop functionality should be smooth and responsive.
• The code should be well-structured and easy to understand.

Expected Behavior:

• When a task is dragged, it should visually separate from the list.
• As the dragged task moves over other tasks, the other tasks should visually indicate that they are potential drop zones (e.g., by changing background color).
• When the dragged task is released, it should be inserted into the list at the position where the mouse was released.
• Deleting a task should immediately remove it from the list.
• Adding a task should immediately add it to the bottom of the list.

Edge Cases to Consider:

• Dragging a task onto itself (should not change the order).
• Dragging a task outside the bounds of the list (should not affect the list).
• Empty task list (handle gracefully).
• Rapidly adding and deleting tasks.

Examples

Example 1:

Initial State:  [Task 1, Task 2, Task 3]

User Action: Drags Task 2 to be between Task 1 and Task 3.

Output: [Task 1, Task 2, Task 3] (Task 2 is now in the middle)
Explanation: The task list is reordered to reflect the new position of Task 2.

Example 2:

Initial State: [Task 1, Task 2]

User Action: Adds "Task 3" and then deletes "Task 1".

Output: [Task 2, Task 3]
Explanation: The list is updated to reflect the addition of Task 3 and the deletion of Task 1.

Example 3:

Initial State: [] (Empty List)

User Action: Adds "Task 1"

Output: [Task 1]
Explanation: The list now contains a single task.

Constraints

• DOM Elements: You must manipulate the DOM directly using JavaScript.
• Event Handling: Utilize JavaScript's event handling mechanisms (e.g., mousedown, mousemove, mouseup, dragstart, dragover, drop).
• Performance: While not a primary focus, strive for reasonable performance. Avoid unnecessary DOM manipulations. The list should contain a maximum of 20 tasks.
• Input Format: Task names should be strings.

Notes

• Consider using event delegation to handle events on the task list elements efficiently.
• Think about how to store the task data (e.g., in an array) and keep it synchronized with the DOM.
• The visual feedback for drag-and-drop can be implemented using CSS classes or inline styles.
• Start with a basic implementation of adding and deleting tasks before tackling the drag-and-drop functionality. Break the problem down into smaller, manageable steps.
• Focus on the core drag-and-drop logic first, and then refine the visual aspects.