HTML and CSS Reference
In-Depth Information
In the previous code, you're searching for the
divs
that have the
draggable
attribute. Then you add the ARIA support starting in
the
dragstart
event. Once the element begins to drag, you set
the
aria-grabbed
attribute to
true
, so that an assistive device
can feedback. You're also now making the drop zone an ele-
ment that can accept keyboard focus using
tabIndex = 0
and
finally you're saying the drop effect should be 'copy'. You could
mirror the
allowedEffect
and
dropEffect
in the native drag and
drop, but for now you'll remain focused on the ARIA support.
Next, you add the new
dragend
event handler, and once the ele-
ment is no longer being dragged, you remove the
aria-grabbed
attribute and reset the drop zone attributes, that is, no
tabIndex
and no
dropEffect
. Lastly, you initialise the draggable element
by setting the
tabIndex
and the
aria-grabbed
flag.
With this code, users can move around your application and
its drag-and-drop components, and their screenreaders (if they
support ARIA) will feed back the current state of the operation.
However—and this is a big however—since no browser has
implemented the keyboard support for native drag and drop,
you will most likely have to consider rolling your own drag and
drop using JavaScript to handle everything—a rather sad ending
to what is a particularly common operation on the Web.
The drag and drop API isn't in a great state and can be difficult to
implement across all the browsers your application may support.
In fact, you may have to fall back to an old-school JavaScript-
based solution to drag and drop where the support is lacking.
However, native drag and drop, combined with newer APIs
like the File API (out of the scope of this topic, but it allows the
browser to read files directly from within JavaScript, without the
need for any submission and interaction with the server) allows
users to drag files straight into the browser. This functionality is
appearing as beta features in applications such as Gmail, allow-
ing users with browsers that support the bleeding edge drag
and drop API, if there is such a thing, to experience the very lat-
est technology. Beyond browser support, accessibility is another
big hurdle at the moment.
Yo u ' l l n e e d t o c a r e f u l l y c o n is i d e r w h e t h e r n a t i v e d r a g a n d d r o p i is
the right choice for your application.
