Drag and drop

Drag-and-drop functionality is something that computer users have come to take for granted as "just working," and there are a few ways to enable it within the browser. Windows Internet Explorer 9 and earlier versions of Windows Internet Explorer support the dataTransfer object and events to drag images, links, and text. Internet Explorer 10 adds support for the draggable attribute, which makes any HTML element you apply it to able to be dragged on the page. Internet Explorer 10 also adds the files attribute to the dataTransfer object, which enables drag-and-drop support for one or more files from the desktop to a webpage.

The draggable attribute

The draggable attribute allows you to make any HTML element able to be dragged on the page. It provides the following states.

KeywordDescription

true

The content can be dragged.

false

The content cannot be dragged.

auto

The content takes the default browser behavior (text, links, and images are draggable; other elements are not).

 

For example, the following code example allows the user to drag elements around the screen.


<button id="mybutton" draggable="true">Drag me</button>
<img src="photo.png" draggable="true" />
<div id="mydiv" draggable="true">Moveable text</div>


When a user drags a draggable element, Internet Explorer 10 provides a ghost image that moves with the cursor as it's dragged. The draggable attribute is not inherited, so children of an element are not automatically draggable.

The files attribute for the dataTransfer object

The addition of the files attribute to the dataTransfer object allows you to drag files from folders or your desktop onto a webpage. This can simplify creating programs such as an email client in which you can drag attachments into a message, or add photos in a gallery page.

The following event listener and "dropHandler" function show how to create an area that the user can drag a file to. The "dropspot" can be a div, an img, or another element on the page. The dragover and drop events use our "doNothing" function to prevent default handling and bubbling of the event, which otherwise might cause unpredictable results.


// this function runs when the page loads to set up the drop area
function init() 
{
  // Set the drop-event handlers.
  var dropArea = document.getElementById("dropspot");
  dropArea.addEventListener("drop", dropHandler, false);
  dropArea.addEventListener("dragover", doNothing, false);
}
function dropHandler(event)
{
  // Use our doNothing() function to prevent default processing. 
  doNothing(event);
  // Get the file(s) that are dropped.
  var filelist =  event.dataTransfer.files;
  if (!filelist) return;  // if null, exit now
  var filecount = filelist.length;  // get number of dropped files

  if (filecount > 0) 
  {
    // Do something with the files.         
  } 
}
// Prevents the event from continuing so our handlers can process the event.
function doNothing(event)
{
  event.stopPropagation();
  event.preventDefault();
}


API Reference

dataTransfer
DragEvent
draggable

Samples and tutorials

HTML5 Drag and drop sample

Internet Explorer Test Drive demos

Magnetic Poetry

IEBlog posts

HTML5 Drag and Drop in IE10 PPB2

Specification

HTML5: Section 7.7

 

 

Show:
© 2014 Microsoft