Demo: Item Types

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.

List of {{list.label}} (max. {{list.max}})

List Models

{{modelAsJson}}