HTML and CSS Reference
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
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.
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
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.