dnd list

dnd-list directive

Use the dnd-list attribute to make your list element a dropzone. Usually you will add a single li element as child with the ng-repeat directive. If you don't do that, we will not be able to position the dropped element correctly. If you want your list to be sortable, also add the dnd-draggable directive to your li element(s). Both the dnd-list and it's direct children must have position: relative CSS style, otherwise the positioning algorithm will not be able to determine the correct placeholder position in all browsers.

Attributes

• dnd-list Required attribute. The value has to be the array in which the data of the dropped element should be inserted.
• dnd-allowed-types Optional array of allowed item types. When used, only items that had a matching dnd-type attribute will be dropable.
• dnd-disable-if Optional boolean expression. When it evaluates to true, no dropping into the list is possible. Note that this also disables rearranging items inside the list.
• dnd-horizontal-list Optional boolean expression. When it evaluates to true, the positioning algorithm will use the left and right halfs of the list items instead of the upper and lower halfs.
• dnd-external-sources Optional boolean expression. When it evaluates to true, the list accepts drops from sources outside of the current browser tab. This allows to drag and drop accross different browser tabs. Note that this will allow to drop arbitrary text into the list, thus it is highly recommended to implement the dnd-drop callback to check the incoming element for sanity. Furthermore, the dnd-type of external sources can not be determined, therefore do not rely on restrictions of dnd-allowed-type. Also note that this feature does not work very well in Internet Explorer.

Callbacks

• dnd-dragover Optional expression that is invoked when an element is dragged over the list. If the expression is set, but does not return true, the element is not allowed to be dropped. The following variables will be available:
  • event The original dragover event sent by the browser.
  • index The position in the list at which the element would be dropped.
  • type The dnd-type set on the dnd-draggable, or undefined if unset.
  • external Whether the element was dragged from an external source. See dnd-external-sources.
• dnd-drop Optional expression that is invoked when an element is dropped on the list.
  • The following variables will be available:
    • event The original drop event sent by the browser.
    • index The position in the list at which the element would be dropped.
    • item The transferred object.
    • type The dnd-type set on the dnd-draggable, or undefined if unset.
    • external Whether the element was dragged from an external source. See dnd-external-sources.
  • The return value determines the further handling of the drop:
    • false The drop will be canceled and the element won't be inserted.
    • true Signalises that the drop is allowed, but the dnd-drop callback will take care of inserting the element.
    • Otherwise: All other return values will be treated as the object to insert into the array. In most cases you simply want to return the item parameter, but there are no restrictions on what you can return.
• dnd-inserted Optional expression that is invoked after a drop if the element was actually inserted into the list. The same local variables as for dnd-drop will be available. Note that for reorderings inside the same list the old element will still be in the list due to the fact that dnd-moved was not called yet.

CSS classes

• dndPlaceholder When an element is dragged over the list, a new placeholder child element will be added. This element is of type li and has the class dndPlaceholder set. Alternatively, you can define your own placeholder by creating a child element with dndPlaceholder class.
• dndDragover This class will be added to the list while an element is being dragged over the list.