Demo: Advanced Features
- Callbacks: The directives offer various callbacks, which in this example will log the events to the console.
Additionally, the callbacks on the dnd-list can prevent an element from being dropped. In this example you can't drop elements
after the 10th position, because we are preventing that in the dnd-dragover callback.
- dnd-allowed-types in nested lists: We are using the dnd-allowed-types attribute to ensure that Containers
only accept items, but not other containers.
- dnd-horizontal-list: This attribute tells the positioning algorithm to drop incoming elements left or right
of the existing elements, instead of above or below.
- dnd-external-sources: Allows to drag and drop elements accross browser windows, which you can test in this
example. The downside to this is that the lists will accept arbitrary text to be dropped. To prevent that, the dnd-drop callback
verifies that the dropped element is of the desired format.
- dnd-effect-allowed: This attribute is set to 'copyMove' in this example, which means that the user can choose
whether to copy or move an element by holding down the Ctrl key. Note that this doesn't work in Chrome very well.
Generated Model
{{modelAsJson}}