Скачать или смотреть Angular 19 Tutorial

Drag-and-Drop Events in Angular19
Drag-and-drop events in Angular19 allow us to move elements within the DOM using the mouse. Here are the key events involved:

dragstart - Fired when the drag operation starts.
drag - Continuously fired while the element is being dragged.
dragend - Fired when the drag operation is complete (whether dropped or not).
dragover - Fired when a dragged element is over a valid drop target.
dragenter - Fired when a dragged element enters a valid drop target.
dragleave - Fired when a dragged element leaves a valid drop target.
drop - Fired when the dragged element is dropped on a drop target.


How It Works
Drag Start (dragstart):

Triggered when the user starts dragging the element.
We set some data using event.dataTransfer.setData() to carry information.
Dragging (drag):

Fired continuously while the element is being dragged.
Useful for showing the current dragging state.
Drag End (dragend):

Fired when the drag operation completes, whether it is dropped or not.
Drag Over (dragover):

Triggered when the dragged element is over a valid drop target.
We call event.preventDefault() to allow the drop.
Drag Enter (dragenter):

Fired when the dragged item enters the drop zone.
Good for adding hover effects or visual cues.
Drag Leave (dragleave):

Triggered when the dragged item leaves the drop zone.
Use this to remove visual cues.
Drop (drop):

Fired when the element is dropped on a valid target.

We retrieve the data with event.dataTransfer.getData() and perform the drop operation.
Output Example
When you start dragging, the console shows "Drag Start".
While dragging, it continuously shows "Dragging...".
On dropping, it shows "Dropped: This is a draggable item".
If you leave the drop zone without dropping, it shows "Drag Leave".
Why Use event.preventDefault() in DragOver
The dragover event must have event.preventDefault() to indicate that the drop is allowed. Without it, the drop event will not fire.

Let me know if you need more explanations or examples! 😊

👍 If you enjoyed this video, make sure to like, subscribe, and hit the bell icon for more Angular 19 tutorials!
💬 Got questions? Drop them in the comments below!

📌 Watch the Full Playlist Here:    • Angular 19 tutorial in Hindi (Part 1) |  I...  
🔗 Angular 19 Tutorial Series

💬 Have Questions? Drop them in the comments!

🔔 Subscribe for More Angular 19 Tutorials! 👉    / @sunnysood1135  

📢 Follow me on:
💻 GitHub: https://github.com/sunnysood1may/Angu...

#Angular19 #AngularTutorials #MouseEvents #WebDevelopment #Frontend