Drag and drop touch support

  • Article

Internet Explorer 11 introduces native support for touch-based HTML5 drag and drop.

Adding drag and drop functionality to your web app provides an intuitive way for your users to move or copy files from one place to another, or to visually rearrange items in a collection. Just as Internet Explorer provides basic touch support by default, most existing sites using HTML5 drag and drop should "just work" with a press, hold, and drag user interaction pattern. While you’ll receive user input events on the UI thread as you expect, IE actually handles the ghosted drag image rendering and animation on a separate thread to keep your site as responsive as possible.

Important  This feature is not supported in IE11 on Windows 7.

 

UX patterns

Press, hold, and drag

For touch devices serving up web content, a common user interaction pattern for drag and drop is a sequence of press, hold and drag. This is the default behavior of elements with the draggable attribute in IE11. Many sites have content below the fold and rely upon vertical panning / scrolling, and Internet Explorer in the new Windows UI provides back / forward navigation by horizontal swipe. Because of this, the press, hold and drag pattern for touch-based drag and drop generally works best for websites in IE11, whereas the cross-slide pattern is an effective technique for drag and drop in Windows Store apps.

Note  Support for touch-based drag and drop operations is scoped to a single browser window. Although its not possible to drag elements across windows, dragging file objects from the Windows desktop to IE11 windows in the desktop is supported.

 

Cross-slide

Many Windows Store apps and some websites use a flat system of navigation, where the user pans across a single page and/or navigates through pages that reside on the same hierarchical level of the site. Using thecross-slide interaction pattern, these apps can disambiguate the user’s intent to pan versus drag by only allowing panning along one axis using the touch-actionproperty:

touch-action: pan-x;

And then responding to drag events and manipulation events along the perpendicular axis:

To improve the cross-slide user experience, IE11 and Windows Store apps introduce the cross-slide-x and cross-slide-y values to the touch-action property. These values request that IE (or the Windows Runtime, in the case of Windows Store apps) responds to certain user interactions with cross-slide animations on a thread independent from the UI.

Additionally, IE11 and Windows Store apps provide several new state values for more fine-tuned handling of the MSManipulationEvent:

Term Description

MS_MANIPULATION_STATE_PRESELECT

A contact has initiated a cross-slide interaction.

MS_MANIPULATION_STATE_SELECTING

A cross-slide interaction has crossed the selection distance threshold; selection is activated.

MS_MANIPULATION_STATE_DRAGGING

A cross-slide interaction has crossed the drag distance threshold; dragging is activated.

MS_MANIPULATION_STATE_CANCELLED

A cross-slide interaction has been cancelled. This can happen for any of these reasons:

  • The user hits the Esc key
  • The window lost focus
  • The associated pointer was cancelled (for example, due to a digitizer issue)
  • The drag was cancelled via script (for example, by calling preventDefault on a dragstart or drag event)

MS_MANIPULATION_STATE_COMMITTED

The touch pointer was released and the manipulation has completed.

 

Clipboard support for images