GV

GeezerVison

The World Wide Web, restored to 800 pixels of glory.

Home|About|Gaming cabinet|Archives|How it works|Starter sites

On this site

  • Docs
  • Tutorials
  • Playground
  • Reference
  • code
  • ElementRef
  • CdkDropList
  • DragAxis
  • DragStartDelay
  • Point
  • DragConstrainPosition
  • PreviewContainer
  • EventEmitter
  • CdkDragStart

This view

  • Original page
  • New address

GeezerVison is showing next.angular.dev — CdkDrag • Angular

API

    
      class CdkDrag<T = any> implements AfterViewInit ,OnChanges ,OnDestroy {}
    
    

Arbitrary data to attach to this drag instance.

Locks the position of the dragged element along the specified axis.

Selector that will be used to determine the root draggable element, starting from the cdkDrag element and going up the DOM. Passing an alternate root element is useful when trying to enable dragging on an element that you might not have access to.

Node or selector that will be used to determine the element to which the draggable's position will be constrained. If a string is passed in, it'll be used as a selector that will be matched starting from the element's parent and going up the DOM until a match has been found.

Amount of milliseconds to wait after the user has put their pointer down before starting to drag the element.

Sets the position of a CdkDrag that is outside of a drop container. Can be used to restore the element's position for a returning user.

Whether starting to drag this element is disabled.

Function that can be used to customize the logic of how the position of the drag item is limited while it's being dragged. Gets called with a point containing the current position of the user's pointer on the page, a reference to the item being dragged and its dimensions. Should return a point describing where the item should be rendered.

Class to be added to the preview element.

Configures the place into which the preview of the item will be inserted. Can be configured globally through CDK_DROP_LIST. Possible values:

  • global - Preview will be inserted at the bottom of the <body>. The advantage is that you don't have to worry about overflow: hidden or z-index, but the item won't retain its inherited styles.
  • parent - Preview will be inserted into the parent of the drag item. The advantage is that inherited styles will be preserved, but it may be clipped by overflow: hidden or not be visible due to z-index. Furthermore, the preview is going to have an effect over selectors like :nth-child and some flexbox configurations.
  • ElementRef<HTMLElement> | HTMLElement - Preview will be inserted into a specific element. Same advantages and disadvantages as parent.

If the parent of the dragged element has a scale transform, it can throw off the positioning when the user starts dragging. Use this input to notify the CDK of the scale.

Emits when the user starts dragging the item.

Emits when the user has released a drag item, before any animations have started.

Emits when the user stops dragging an item in the container.

Emits when the user has moved the item into a new container.

Emits when the user removes the item its container by dragging it into another container.

Emits when the user drops the item inside a container.

Emits as the user is dragging the item. Use with caution, because this event will fire for every pixel that the user has dragged.

Returns the element that is being used as a placeholder while the current element is being dragged.

@returnsHTMLElement

Returns the root draggable element.

@returnsHTMLElement

Resets a standalone drag item to its initial position.

@returnsvoid

Resets drag item to end of boundary element.

@returnsvoid

Gets the pixel coordinates of the draggable outside of a drop container.

@returnsReadonly<Point>

Sets the current position in pixels the draggable outside of a drop container.

@paramvaluePoint

New position to be set.

@returnsvoid
@returnsvoid
@paramchangesSimpleChanges<this>
@returnsvoid
@returnsvoid
You are visitor 01402520 — GeezerVison does not store the pages you look up.
Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required.