diff --git a/adev/src/content/guide/drag-drop.md b/adev/src/content/guide/drag-drop.md index f9a27839f80..e37aa7be705 100644 --- a/adev/src/content/guide/drag-drop.md +++ b/adev/src/content/guide/drag-drop.md @@ -57,7 +57,7 @@ Add the `cdkDropList` directive to a parent element to group draggable elements The drag and drop directives don't update your data model. To update the data model, listen to the `cdkDropListDropped` event (once the user finishes dragging) and update the data model manually. - + @@ -83,7 +83,7 @@ The `cdkDropListConnectedTo` directive works both with a direct reference to ano
- + @@ -100,7 +100,7 @@ Use the `cdkDropListGroup` directive if you have an unknown number of connected - + @@ -112,7 +112,7 @@ You can use the `CDK_DROP_LIST_GROUP` injection token that can be used to refere By default, a user can move `cdkDrag` elements from one container into another connected container. For more fine-grained control over which elements can be dropped into a container, use `cdkDropListEnterPredicate`. Angular calls the predicate whenever a draggable element enters a new container. Depending on whether the predicate returns true or false, the item may or may not be allowed into the new container. - + @@ -138,7 +138,7 @@ You can associate some arbitrary data with both `cdkDrag` and `cdkDropList` by s By default, the user can drag the entire `cdkDrag` element to move it around. To restrict the user to only be able to do so using a handle element, add the `cdkDragHandle` directive to an element inside of `cdkDrag`. You can have as many `cdkDragHandle` elements as you want. - + @@ -155,7 +155,7 @@ To customize the preview, provide a custom template via `*cdkDragPreview`. The c The cloned element removes its id attribute in order to avoid having multiple elements with the same id on the page. This will cause any CSS that targets that id not to be applied. - + @@ -181,7 +181,7 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `p While a `cdkDrag` element is being dragged, the directive creates a placeholder element that shows where the element will be placed when dropped. By default, the placeholder is a clone of the element that is being dragged. You can replace the placeholder with a custom one using the `*cdkDragPlaceholder` directive: - + @@ -195,7 +195,7 @@ Set the `cdkDragRootElement` attribute if there's an element that you want to ma The attribute accepts a selector and looks up the DOM until it finds an element that matches the selector. If an element is found, it becomes draggable. This is useful for cases such as making a dialog draggable. - + @@ -207,7 +207,7 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `r By default, `cdkDrag` elements not in a `cdkDropList` move from their normal DOM position only when a user manually moves the element. Use the `cdkDragFreeDragPosition` input to explicitly set the element’s position. A common use case for this is restoring a draggable element's position after a user has navigated away and then returned. - + @@ -217,7 +217,7 @@ By default, `cdkDrag` elements not in a `cdkDropList` move from their normal DOM To stop the user from being able to drag a `cdkDrag` element outside of another element, pass a CSS selector to the `cdkDragBoundary` attribute. This attribute accepts a selector and looks up the DOM until it finds an element that matches it. If a match is found, the element becomes the boundary that the draggable element can't be dragged outside of `cdkDragBoundary` can also be used when `cdkDrag` is placed inside a `cdkDropList`. - + @@ -229,7 +229,7 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update bo By default, `cdkDrag` allows free movement in all directions. To restrict dragging to a specific axis, set `cdkDragLockAxis` to either "x" or "y"on `cdkDrag`. To restrict dragging for multiple draggable elements within `cdkDropList`, set `cdkDropListLockAxis` on `cdkDropList` instead. - + @@ -243,7 +243,7 @@ By default when the user puts their pointer down on a `cdkDrag`, the dragging se You can delay the dragging sequence using the `cdkDragStartDelay` input. The input waits for the user to hold down their pointer for the specified number of milliseconds before dragging the element. - + @@ -255,7 +255,7 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update dr If you want to disable dragging for a particular drag item, set the `cdkDragDisabled` input on a `cdkDrag` item to true or false. You can disable an entire list using the `cdkDropListDisabled` input on a `cdkDropList`. It is also possible to disable a specific handle via `cdkDragHandleDisabled` on `cdkDragHandle`. - + @@ -269,7 +269,7 @@ Alternatively, you can modify the `CDK_DRAG_CONFIG` injection token to update `d By default, the `cdkDropList` directive assumes lists are vertical. This can be changed by setting the `cdkDropListOrientation` property to horizontal. - + @@ -283,7 +283,7 @@ By default, the `cdkDropList` sorts the draggable elements by moving them around If you have a sortable list that needs to wrap onto new lines, you can set `cdkDropListOrientation` attribute to `mixed`. This causes the list to use a different strategy of sorting the elements which involves moving them in the DOM. However the list can no longer animate the sorting action . - + @@ -293,7 +293,7 @@ If you have a sortable list that needs to wrap onto new lines, you can set `cdkD By default, `cdkDrag` elements are sorted into any position inside of a `cdkDropList`. To change this behavior, set the `cdkDropListSortPredicate` attribute which takes in a function. The predicate function is called whenever a draggable element is about to be moved into a new index within the drop list. If the predicate returns true, the item will be moved into the new index, otherwise it will keep its current position. - + @@ -304,7 +304,7 @@ By default, `cdkDrag` elements are sorted into any position inside of a `cdkDrop There are cases where draggable elements can be dragged out of one `cdkDropList` into another, however the user shouldn't be able to sort them within the source list. For these cases, add the `cdkDropListSortingDisabled` attribute to prevent the draggable elements in a `cdkDropList` from sorting. This preserves the dragged element's initial position in the source list if it does not get dragged to a new valid position. - +