Explore the fascinating world of JavaScript's drag and drop API! Discover how this set of browser standards enables seamless app communication. Learn the ins and outs of making elements draggable and handling drag events. The hosts share amusing anecdotes and dive into the complexities of implementation, including browser compatibility and accessibility challenges. They also tackle real-world frustrations, like working with TweetDeck, while highlighting the fun possibilities offered by in-browser APIs. Perfect for devs wanting to enhance user interactivity!
28:51
forum Ask episode
web_stories AI Snips
view_agenda Chapters
auto_awesome Transcript
info_circle Episode notes
insights INSIGHT
Drag and Drop API Insight
The Drag and Drop API is a browser standard for data transfer between applications and web pages.
This interoperability lets different apps communicate, enabling actions like dragging files between them.
volunteer_activism ADVICE
Implementation Advice
Use existing libraries for simple reordering within your application.
Use the JavaScript API for desktop apps or when needing cross-application communication.
insights INSIGHT
DataTransfer API
The DataTransfer API lets you store data about dragged elements, like images or text.
Use getData/setData to manage this data during drag events.
Get the Snipd Podcast app to discover more snips from this episode
In this Hasty Treat, Scott and Wes talk about JavaScript’s drag and drop API — how it works, concerns, best practices, and more!
.TECH Domains - Sponsor
.TECH is taking the tech industry by storm. A domain that shows the world what you are all about! If you’re looking for a domain name for your startup, portfolio, or your own project like we did with uses.tech, check out .tech Domains. Syntax listeners can snap their .TECH Domains at 80% off on five-year registration by visiting go.tech/syntaxistech and using the coupon code “syntax5”.
Sentry - Sponsor
If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.
Show Notes
04:45 - What is it?
Drag and drop is really for desktop apps
You can drag and drop anything from any browser to any browser
The important thing here is that this is a set of browser standards that allow different apps to communicate
07:50 - How to implement
Make an element draggable
Listen on elements for drag events
The events bubble up, so you can listen on the parent element as items are added/removed
09:06 - DataTransfer API
You can store anything you want in it
getData / setData API
Reference strings
11:35 - Accepting drops
When you dragOver, you need to preventDefault()
Calling the preventDefault() method during both a dragEnter and dragOver event will indicate that a drop is allowed at that location
13:01 - Drop Image
Set whatever you want
16:00 - Drop Effect
What does it look like when you drop it? Does it go back?
Syntax - Tasty Web Development Treats