Instructions:
Drag & drop the names to move them around. Note that the names can not be
dropped in the list for the wrong gender. This is achieved with the dnd-type and
dnd-allowed-types attributes.
This demo also shows the use of the dnd-disable-if attribute, which is used here
to limit the number of names per list, as well as fix Alex' position.
You can combine these functions with
nested lists
to build very powerful UIs.