Pragmatic drag and drop is powered by the web platforms built in drag and drop functionality. Embracing the web platform unlocks huge speed and flexibility wins. However, leveraging the web platform does mean embracing a few design constraints.

These constraints are are shared for all native powered drag and drop operations on the web, so users will be familiar with these affordances.

Cursors

The specification for web platform drag and drop currently gives very little flexibility when it comes to what cursor is used Ideally we would have cursor:grabbing while dragging!

While a drag operation is occurring, the cursor is exclusively controlled by the dropEffect associated with the drag operation. You can control the dropEffect by using the getDropEffect() drop target API.

dropEffectcursorNotes
"move"cursor:default
"link"cursor:alias⚠️ Safari uses cursor:default
"copy"cursor:copy
"none"cursor:default

Known web platform bugs

  • Chrome: sometimes the cursor can inconsistently use the cursor value of the element being dragged over
  • Chrome: the cursor can sometimes flash cursor:copy when a drag is first starting - bug

Native drag previews

When using native drag previews, the browser applies some styles that cannot be controlled:

  • The opacity of the preview is lowered slightly (approximately opacity:0.8)
  • A small drop shadow is added

These styles can vary slightly between browsers.

Low opacity on large previews for Windows

Unfortunately, for all browsers on Windows, when a native drag previews is wider than 280px or taller than 280px, then the preview opacity is significantly lowered. If you would not like your previews dimmed on Windows, then you will need to make your native previews smaller than 280pxx280px.

You can also have smaller native previews just for Windows users if you like:

const preview = document.createElement('div');

if (navigator.platform.includes('Win32')) {
    preview.style.maxWidth = '280px';
    preview.style.maxHeight = '280px';
}

Tested on Windows 11:

  • Edge@116
  • Chrome@116
  • Firefox@117
Was this page helpful?
We use this feedback to improve our documentation.