I’m a big fan of the simplicity behind the HTML5 JavaScript Drag & Drop API, but it’s one of the slightly newer APIs that’s well worth feature detecting before using.
Here’s a simple one-liner you can use to do just that:
const init = () => {
// ✅ take it away, feature supported
};
if ('draggable' in document.createElement('div')) {
init();
}
This uses the in
operator to check if it exists in the value returned from document.createElement
.
Remember, the in
operator is great to use as it evaluates to a Boolean, giving us an instant true
or false
reading.
But also, it looks up that Element’s prototype
. HTML Elements are constructed from various different classes behind the scenes, and it’s always worth exploring them by logging them out in the console
and expanding the prototype
or __proto__
property.
🏆 P.S. check out my latest JavaScript courses if you’re serious about taking your skills to the top.
Thanks for reading, happy coding!