Drag and drop

Article
11/03/2017

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 added support for the draggable attribute and the DataTransfer.files property, which enables drag-and-drop support for one or more files from the desktop to a webpage.

Microsoft Edge introduces support for the most current W3C drag and drop model, where a DataTransferItemList object (accessed via the DataTransfer.items property) acts as the drag operation data store. The legacy drag and drop APIs mentioned above are also still supported. For more, see New and legacy drag and drop.

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.

Keyword	Description
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();
}