Beyond the browser: drag, drop, copy, paste

The DataTransfer API, part of the Drag and Drop and Clipboard APIs, is commonly used for moving text within a page. Its potential extends much further: these same interactions enable data exchange with any other application on your desktop, without being tied to web origins or requiring tightly coupled integrations.

Your web app can both send and receive data through these system-level interactions. The key is understanding that the data is MIME-type keyed, and how different types are handled by different destination applications.

Sharing data through drag-and-drop

While the examples here focus on drag-and-drop, the process is analogous for copy-paste. To start sharing data, you provide data keyed by MIME-type on the event.dataTransfer property, which returns a DataTransfer instance. Most editors and browsers respond to these primitive MIME-types:

  • text/html: Rendered in contentEditable elements and rich text editors like Google Docs or Microsoft Word.
  • text/plain: Used by input elements, code editors, and as a fallback from text/html.
  • text/uri-list: Navigates to the URL when dropped on the browser page or URL bar, or creates a shortcut when dropped on the desktop.

Because of the widespread support for text/html in WYSIWYG editors, it's a powerful option for exporting visual content from your app, such as content from a canvas. You can embed resources using Data URLs or public URLs directly in the HTML payload.

Receiving data is the reverse process: listen for the drop or paste event. A key distinction to remember is that during the dragover event, browsers only expose the MIME-type keys. The actual data is only accessible after the drop has occurred.

The clipboard equivalent

The same API is used with clipboard events, but the DataTransfer object is accessed via a property named clipboardData.

Custom data formats for controlled environments

You aren't limited to primitive MIME-types. Any key can identify your data, which is useful for cross-browser interactions within your own application. For more complex data, the JSON.stringify() and JSON.parse() functions enable seamless serialization and deserialization.

Using JSON-LD for an open web

Custom formats are great when your app controls both sides of the transfer, but they lock out third-party applications. To connect with the wider web, a universal format is required. JSON-LD is well-suited for this: it's lightweight, easy to use in JavaScript, and can leverage the extensive predefined types from Schema.org.

You can start with a generic type like Thing or use more specific ones such as Event, Person, MediaObject, or Place. For TypeScript projects, the schema-dts definitions provide helpful interfaces. By speaking a common language like JSON-LD, applications can create deep integrations without complex APIs—all the needed information is in the data itself. This opens possibilities like dragging an event from a calendar into a ToDo app or sharing contacts between services.

Practical considerations

Before integrating this technique, be aware of a few limitations and best practices.

Platform support and UX

All major desktop browsers (Chrome, Edge, Firefox, Safari) and operating systems support this. However, mobile platforms, specifically Android and iOS, do not. The feature is currently limited to desktop contexts. Also, as drag-and-drop on the web is not yet a common expectation for many users, consider providing education or UI patterns to make the interaction discoverable, especially for users coming from mobile-only backgrounds.

Accessibility and security

Drag-and-drop itself is not a fully accessible interaction. Since the DataTransfer API also works with clipboard events, ensure you listen for copy-paste as an alternative input method. Keeping this in mind:

  • Clipboard data is accessible to other applications on the user's device.
  • While dragging over elements, web apps only have access to the data's type keys; the data is only revealed upon drop or paste.
  • Treat all received data like any other user input: sanitize and validate it before use.

The Transmat helper library

To simplify implementation, consider the Transmat library. This open-source tool helps align browser differences, includes JSON-LD utilities, provides an observer for responding to transfer events (useful for highlighting drop areas), and can integrate with existing custom drag-and-drop implementations.