Write JavaScript like a pro. Javascript Icon

Follow the ultimate JavaScript roadmap.

Feature Detect the HTML5 JavaScript Drag & Drop API

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!

Learn JavaScript the right way.

The most complete guide to learning JavaScript ever built.
Trusted by 82,951 students.

Todd Motto

with Todd Motto

Google Developer Expert icon Google Developer Expert

Related blogs 🚀

Free eBooks:

Angular Directives In-Depth eBook Cover

JavaScript Array Methods eBook Cover

NestJS Build a RESTful CRUD API eBook Cover