HTML and CSS Reference
In-Depth Information
Basic drag-and-drop
To make an element draggable is simple, with a couple of browser
compatibility caveats that we'll get to later: add a
draggable
attribute
with value
true
. This first example, ch05/drag-and-drop-1.html, has a
list of locations in the Columbia Internet offices that you'll make
draggable:
<ul id="locations">
<li draggable="true"
id="recpt"
ondragstart="drag(event)">
Reception
</li>
...
</ul>
On each of the elements, the
ondragstart
attribute has been set. This
function is used to set the data that will be passed by the drag-and-drop
action. For now, you'll set the text data as the
ID
of the element:
function drag(event) {
event.dataTransfer
.setData('Text',
event.target.id);
log('drag ' + event.target.id);
}
Within the function there's also a
log
command so the sequence of events
firing is recorded on the page. As the
element with
ID
'support'
is
dragged, the messages are added at
the bottom of the page.
