- Welcome to Drag and Drop
- Getting to Know the Drag-and-Drop API
- Starting the Drag-and-Drop Example
- Styling the Draggable and Target Elements
- Starting the Drag Operation
- Allowing Dragged Objects to Enter the Targets
- Allowing Dragged Objects to Be Dropped on Certain Targets
- Handling Drop Events
- Ending Drop Operations
- The draganddrop.html Example Code
This chapter is from the book
This chapter is from the book
This chapter is from the book
Getting to Know the Drag-and-Drop API
You can read all about the drag-and-drop specification according to the W3C at: http://dev.w3.org/html5/spec/dnd.html.
From an HTML point of view, drag and drop is supported with these attributes:
- draggable
- ondragenter
- ondragover
- ondrop
- ondragstart
- ondragend
The draggable attribute of an element, as you might guess, is set to true if you want to allow that element to be dragged. The "on" attributes are used to connect JavaScript functions to various events. For example, you use ondragenter to call a JavaScript function when a draggable element is being dragged over another element (and in the JavaScript function, you can indicate to the browser whether you can drop the draggable item there).
Let's take a look at each of these attributes briefly; then we'll put them to work in the draganddrop.html example.
The draggable Attribute
The draggable attribute is the most basic of all drag-and-drop attributes. To make an element draggable, you set its draggable attribute to true:
<div id="draggable3" draggable="true"> </div>
Doing so informs the browser that this element can be dragged, but setting this attribute isn't all that's needed—you also have to connect up JavaScript functions to the "on" attributes to make this work.
The ondragenter Attribute
Drag enter events occur in a drop target when the user drags a draggable element over that target.
You can connect this event to a JavaScript handler function (which it's up to you to write) like this:
<div id="target1"
ondragenter="return enter(event)"
.
.
.
Note that this event occurs in drop targets, not in draggable elements.
The ondragover Attribute
Dragover events occur in a drop target while users drag a draggable element over that target. You can connect this event to a JavaScript handler function like this:
<div id="target1"
ondragenter="return enter(event)"
ondragover="return over(event)"
.
.
.
This event occurs in drop targets.
The ondrop Attribute
Drop events occur in a drop target while users drop a draggable element onto that target. You can connect this event to a JavaScript handler function like this:
<div id="target1" ondragenter="return enter(event)" ondragover="return over(event)" ondrop="return drop(event)">
This event occurs in drop targets; note that it's ondrop, not ondragdrop!
The ondragstart Attribute
This event occurs in draggable elements when users start dragging them. You can connect JavaScript function handlers to this event like this:
<div id="draggable1" draggable="true" ondragstart="return start(event)" . . .
This event occurs in draggable elements.
The ondragend Attribute
This event occurs in draggable elements when users stop dragging them. You can connect JavaScript function handlers to this event like this:
<div id="draggable1" draggable="true" ondragstart="return start(event)" ondragend="return end(event)">1 . . .
This event occurs in draggable elements.
The dataTransfer Object
There is one more item you should know about—the dataTransfer that comes built in to event objects in HTML5—because it offers support for drag-and-drop operations. You access this object through the event object passed to you when drag-and-drop operations start.
For example, the dataTransfer object has a property named effectAllowed that lets you specify what drag-and-drop operation is allowed. It has functions named setData() and getData() to allow you to specify what data you want to drag and drop with a draggable element, and another function named setDragImage() lets you specify the image of the item being dragged.
Here's how using dataTransfer in JavaScript might work, where we're specifying that move operations are OK, storing the ID of the draggable element so we know what element to move when the drag operation is complete, and setting the image that the user drags to be a copy of the draggable element that the mouse clicked (as given by the event object e's target attribute):
e.dataTransfer.effectAllowed='move';
e.dataTransfer.setData("Data",
e.target.getAttribute('id'));
e.dataTransfer.setDragImage(e.target, 0, 0);
To make this clear, let's see all this at work in an example.