Drag and Drop - AS Blog

HTML Drag and Drop interfaces enable applications to use drag and drop features in Firefox and other browsers. For example, with these features, the user can select draggable elements with a mouse, drag the elements to a droppable element, and drop those elements by releasing the mouse button.

A translucent representation of the draggable elements follows the mouse pointer during the drag operation.

For web sites, extensions, and XUL applications, you can customize the types of elements that can become draggable elements, and the type of feedback the draggable elements produce, and the droppable elements.

This document is an overview of HTML drag and drop. It includes a description of the interfaces, the basic steps to add drag and drop support to an application and a summary of the interoperability of the interfaces.

Drag Events

HTML drag and drop uses the DOM event model and drag events inherit from mouse events. A typical drag operation begins when a user selects a draggable element with a mouse, moves the mouse to a droppable element and then releases the mouse. During the operations, several event types are fired and some event types might be fired many times.

All of the drag event types have an associated global event handler. Each drag event type and drag global attribute has a reference document that describes the event. The following table provides a short description of the event types and a link to the reference documents.

Event	On Event Handler	Description
`drag`	`ondrag`	Fired when an element or text selection is being dragged.
`dragend`	`ondragend`	Fired when a drag operation is being ended (for example, by releasing a mouse button or hitting the escape key).
`dragenter`	`ondragenter`	Fired when a dragged element or text selection enters a valid drop target.
`dragexit`	`ondragexit`	Fired when an element is no longer the drag operation’s immediate selection target.
`dragleave`	`ondragleave`	Fired when a dragged element or text selection leaves a valid drop target.
`dragover`	`ondragover`	Fired when an element or text selection is being dragged over a valid drop target (every few hundred milliseconds).
`dragstart`	`ondragstart`	Fired when the user starts dragging an element or text selection.
`drop`	`ondrop`	Fired when an element or text selection is dropped on a valid drop target.

What is draggable

This section provides a summary of the basic steps to add drag and drop functionality to an application. Each section includes a description of the step, a short code example, and links to additional information.

To make an element draggable requires adding the draggable attribute plus the ondragstart global event handler, as shown in the following code sample

function dragstart_handler(ev) {
 console.log("dragStart");
 // Add the target element's id to the data transfer object
 ev.dataTransfer.setData("text/plain", ev.target.id);
}
<body>
<p id="p1" draggable="true" ondragstart="dragstart_handler(event);">  This element is draggable. </p>
</body>

Define the drag’s data

The application is free to include any number of data items in a drag operation. Each data item is a string of a particular type, typically a MIME type such as text/html.

function dragstart_handler(ev) {
  // Add the drag data
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.setData("text/html", "Example paragraph"); 
ev.dataTransfer.setData("text/uri-list", "http://developer.mozilla.org"); 
}

Define the drag image

By default, the browser supplies an image that appears beside the mouse pointer during a drag operation.

function dragstart_handler(ev) {
  // Create an image and then use it for the drag image.
  // NOTE: change "example.gif" to an existing image or the image 
  // will not be created and the default drag image will be used.
  var img = new Image(); 
  img.src = 'example.gif'; 
  ev.dataTransfer.setDragImage(img, 10, 10);
}

Define the drag effect

The dropEffect property is used to control the feedback (typically visual) the user is given during a drag and drop operation. It affects which cursor the browser displays while dragging. For example, when the user hovers over a target drop element, the browser’s cursor may indicate the type of operation that will occur.

function dragstart_handler(ev) {
  // Set the drag effect to copy
  ev.dataTransfer.dropEffect = "copy";
}

Define a drop zone

By default, the browser prevents anything from happening when dropping something onto the HTML element. To change that behavior so that an element becomes a drop zone or is droppable, the element must have both ondragover and ondrop event handler attributes.

function dragover_handler(ev) {
 ev.preventDefault();
 // Set the dropEffect to move
 ev.dataTransfer.dropEffect = "move"
}
function drop_handler(ev) {
 ev.preventDefault();
 // Get the id of the target and add the moved element to the target's DOM
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
</body>

Handle the drop effect

The handler for the drop event is free to process the drag data in an application specific way. Typically, an application will use the getData() method to retrieve drag items and process them accordingly. Additionally, application semantics may differ depending on the value of the dropEffect and/or the state of modifier keys.

function dragstart_handler(ev) {
 ev.preventDefault();
 // Add the target element's id to the data transfer object
 ev.dataTransfer.setData("text/plain", ev.target.id);
 ev.dropEffect = "move";
}
function drop_handler(ev) {
 ev.preventDefault();
 // Get the id of the target and add the moved element to the target's DOM
 var data = ev.dataTransfer.getData("text");
 ev.target.appendChild(document.getElementById(data));
}
<body>
<p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>
<div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div>
</body>

Drag end

At the end of a drag operation, the dragend event fires at the source element – the element that was the target of the drag start. This event fires whether the drag completed or was canceled. The dragend event handler can check the value of the dropEffect property to determine if the drag operation succeeded or not.

Post Views: 892