HTML and CSS Reference
In-Depth Information
As you've probably already guessed, no browser has imple-
mented this (yet).
However, you can prepare your drag-and-drop demos by
including ARIA support. You will need to set ARIA attributes
on
dragstart
to indicate that the element is being dragged.
We also need to now bind to the
dragend
event to remove the
ARIA attribute. We should also use visual cues to indicate to
the user what elements can be dragged and where they can
be dropped. I'm not going to cover this detail, but Gez Lemon
wrote a detailed article on adding ARIA and general accessibility
to nonnative drag and drop, but the advice also applies to the
native drag and drop provided by this API:
http://dev.opera.com/
var drop = document.getElementById('drop'),
boxes = document.getElementsByTagName('div'),
i = boxes.length;
while (i--) {
if (boxes[i].getAttribute('draggable') != undefined) {
boxes[i].ondragstart = function (event) {
event = event || window.event;
this.setAttribute('aria-grabbed', 'true');
// set the drop targets up for ARIA support
drop.tabIndex = 0; // for keyboard support
drop.setAttribute('aria-dropeffect', 'copy');
// then do something fancy with dataTranfer.setData
};
boxes[i].ondragend = function () {
this.setAttribute('aria-grabbed', 'false');
// reset the drop targets
drop.tabIndex = -1; // for keyboard supportZ
drop.removeAttribute('aria-dropeffect');
};
boxes[i].tabIndex = 0; // for keyboard support
boxes[i].setAttribute('aria-grabbed', 'false');
}
}
