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
<ul id="locations">
<li draggable="true"
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) {
log('drag ' +;
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.
Search WWH ::

Custom Search