28 lines
1.7 KiB
HTML
28 lines
1.7 KiB
HTML
<h1>Demo: Advanced Features</h1>
|
|
|
|
<ul>
|
|
<li><strong>Callbacks:</strong> 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 <strong>you can't drop elements
|
|
after the 10th position</strong>, because we are preventing that in the dnd-dragover callback.</li>
|
|
<li><strong>dnd-allowed-types in nested lists:</strong> We are using the dnd-allowed-types attribute to ensure that Containers
|
|
only accept items, but not other containers.</li>
|
|
<li><strong>dnd-horizontal-list:</strong> This attribute tells the positioning algorithm to drop incoming elements left or right
|
|
of the existing elements, instead of above or below.</li>
|
|
<li><strong>dnd-external-sources:</strong> 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.</li>
|
|
<li><strong>dnd-effect-allowed:</strong> 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.</li>
|
|
</ul>
|
|
|
|
<div class="advancedDemo row">
|
|
<div ng-repeat="containers in model" class="col-md-4">
|
|
<div class="dropzone box box-yellow" ng-include="'advanced/advanced.html'"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div view-source="advanced"></div>
|
|
|
|
<h2>Generated Model</h2>
|
|
<pre>{{modelAsJson}}</pre>
|