Issue #354 (Drag Events, React Tools, Media, Uncats)04/30/20
In previous tips I introduced a basic HTML Drag and Drop API example along with some things you can do with the dataTransfer() object. This tip will focus on the different events you can listen for during a drag operation.
There are 7 drag events that are supported across all modern browsers. They are:
- dragstart - A dragging operation begins (on dragged item)
- drag - A drag operation is in process (on dragged item)
- dragenter - A dragged item enters a valid drop target (on drop target)
- dragover - A valid drop target is dragged over (on drop target)
- dragleave - A dragged item leaves a valid drop target (on drop target)
- drop - A dragged item is dropped on a valid drop target (on drop target)
- dragend - A drag operation ends (on dragged item)
The notes in parentheses next to each bullet point indicate where the event listener would be placed when listening for the event.
As usual, this is always more interesting with an interactive example, so here's a CodePen demo that illustrates all 7 drag events
by printing each one on the page as the event occurs. Some events, of course, occur simultaneously. Also, in order to see the dragleave
event, you have to 'leave' the drop target before entering it again to complete the drop.
The demo displays each message once but it should be noted that the drag
events fire continuously while the item is dragged or while the drop target is being dragged over. The rest of the events occur one time each then won't occur again until another drag operation is initiated, ended, or another drop target is accessed, etc.
It should also be noted that MDN's article
that lists the different events also lists a dragexit
event that has some browser support. But it's recommended to use the dragleave
event (which is apparently the equivalent) instead.
Now on to this week's tools!
Handle React forms with joy. Helps you manage form validation, dirty form submission and reset, field values and changes, and error messages.
A React component that allows for an easy display of HTML e-mail content with automatic sanitization. Support for features should match what is supported by Gmail.
A starter template for creating a new React Hook.
Simple React state management made with ES6 Proxies.
React Hook that uses IntersectionObserver to detect when the user has scrolled to the bottom of the page.
React Cool Portal
A React hook for Portals that helps you render children (e.g. modals, dropdowns, tooltips, etc) into a DOM node that exists outside the DOM hierarchy of the parent component.
React State Selector
Performant, type safe and easy to use React global state manager.
Now at version 7+
. Hooks for building lightweight, fast and extendable data grids for React.
Use nice curvy arrows in your React project. Great for interactive tutorials and product tours.
Now at version 4+
. React router with a small footprint for modern browsers.
A "No Code" GUI for your React app.
Media Tools (SVG, Audio, Video, etc.)
British Museum Collection
The British Museum has released 1.9 million images, most with a CC 4.0 license.
Algorithmically generated triangle art that you can render in a project using a simple API, or generate and download using the online tool.
Built on top of D3.js and stack.gl, a high-level, declarative charting library with over 40 chart types, including scientific charts, 3D graphs, statistical charts, SVG maps, financial charts, and more.
A quick and easy way to resize any image (PNG, JPG, SVG, GIF, and WEBP supported).
PicsArt Photo Editor
More than a dozen online photo editing tools including duotone effects, overlays, filters, background editing, and more.
A compact representation of a placeholder for an image. Replace boring grey boxes with beautiful states for your placeholders.
Image Compare Viewer
Open source video player library focused on giving users and developers the best possible media player experience. Supports HTML5, Dash, YouTube, Vimeo, and Dailymotion.
Free stock music clips that are royalty-free for commercial projects.
Exchange Rates API
A simple and lightweight free service for current and historical foreign exchange rates.
A fully managed integration service that enables you to securely transfer data between SaaS apps like Salesforce, Marketo, Slack, and ServiceNow, and AWS services like Amazon S3, in just a few clicks.
Auto-generates your basic documentation and then provides a beautiful, fast, and collaborative interface for your team to complete your documentation process.
A new non-profit, secure cloud storage service with a focus on privacy that offers a free gigabyte to start.
A fast, secure, and developer-friendly blockchain built to support the next generation of games, apps, and the digital assets that power them.
A reactive Slack application framework. Build interactive Slack apps without webhooks or JSON headache. If you know React, you know how to make a Slack app.
A drop-in replacement for reCAPTCHA (you can switch within minutes) that protects user privacy, rewards websites, and helps companies get their data labeled.
Visualize your Markdown with mindmaps.
A collection of free public APIs for software developers, categorized.
A Tweet for Thought
Technology has changed the way we behave, as this thread demonstrates
Got a Tool Suggestion?
Made something? Send links via Direct Message on Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
If you're a big Seinfeld fan like I am, you'll love this: Seinfeld Adventure. Right now it's just a pitch for a game. I seriously doubt Jerry and his producers will approve this, but it's pretty cool to see what it would be like to play "a game about nothing".
Thanks to all for subscribing and reading!