feat: add custom dragstart event and improve drag enter/leave handling

[colecrouter]

Similar issue to #2, the drag-over class doesn't always get removed properly.

For example, if you have two droppable containers very close to each other, dragging a droppable from one to the other causes both containers to get the class. This happens due to the speed/order the events are handled.

What I removed:

• The global state check ("this element equals target element") as it has proven unreliable

What I added:

• A simple counter for drag events on droppable
• A custom event from draggable to droppable (to remove the class from the source droppable since dragleave does not occur there)

[colecrouter]

For reference, here's what this is about. These two containers are 10px apart, and you can see what happens. At standard refresh rates, the issue is much more apparent.

[Spikeysanju]

This pull request includes changes to enhance the drag-and-drop functionality in the draggable and droppable actions. The key improvements involve adding custom events, managing drag enter/leave state with a counter, and ensuring proper cleanup of event listeners.

Improvements to draggable action:

• src/lib/actions/draggable.ts: Added a custom event dragstart-on-container that bubbles up to the container to signal the start of a drag operation.

Enhancements to droppable action:

• src/lib/actions/droppable.ts: Introduced a counter dragEnterCounter to manage the drag enter/leave state more accurately. [1] [2]
• src/lib/actions/droppable.ts: Added a handler for the dragstart-on-container event to reset the counter and remove the drag-over class. [1] [2]
• src/lib/actions/droppable.ts: Ensured proper cleanup of the dragstart-on-container event listener during teardown.

[Spikeysanju]

@colecrouter , thanks for the PR! I've reviewed it. Will merge it to production when I'm back home tomorrow. Have a great day!