Demo: Advanced Features
- dnd-effect-allowed: This demo shows how to use dnd-effect-allowed to control which drop effects are allowed.
If the source and target elements have no drop effect that is allowed on both, then a drop is not possible. If there are multiple
possible drop effects, then the user can control the drop effect using modifier keys (Ctrl and Alt).
- 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-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.
- 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.
Generated Model
{{modelAsJson}}