File

src/connection-types.ts

Description

Like DropTarget, it can be used just for subscribing to drag state information related to a particular item type or list of types. You do not have to connect it to a DOM element if that's all you want.

To create one, refer to SkyhookDndService.

Extends

ConnectionBase

Index

Methods

Methods

connectDragPreview
connectDragPreview(elementOrNode: Node, options?: DragPreviewOptions)

This function allows you to connect a DOM node to your DragSource as a preview. You will not usually need to call this directly; it is more easily handled by the directives.

You might use an ElementRef.nativeElement, or even an Image.

const img = new Image();
img.onload = this.source.connectDragPreview(img);
img.src = '...';

The subscription returned is automatically unsubscribed when the connection is made. This may be immediate if the DragSource already has a type.

Parameters :
Name Type Optional
elementOrNode Node No
options DragPreviewOptions Yes
Returns : Subscription
connectDragSource
connectDragSource(elementOrNode: Node, options?: DragSourceOptions)

This function allows you to connect a DOM node to your DragSource. You will not usually need to call this directly; it is more easily handled by the directives.

The subscription returned is automatically unsubscribed when the connection is made. This may be immediate if the DragSource already has a type.

Parameters :
Name Type Optional
elementOrNode Node No
options DragSourceOptions Yes
Returns : Subscription
getHandlerId
getHandlerId()

Returns the drag source ID that can be used to simulate the drag and drop events with the testing backend.

Returns : any
setType
setType(type: string | symbol)

Use this method to have a dynamically typed source. If no type has previously been set, it creates the subscription and allows the [dragSource] DOM element to be connected. If you do not need to dynamically update the type, you can set it once via the DragSourceSpec property.

If you wish to have a dynamic type based on an @Input() property, for example, you must call setType() in either of your component's ngOnInit or ngOnChanges methods:

@Input() type: string;
@Input() model: { parentId: number; name: string; };
target = this.dnd.dragSource(null, {
  // ...
});
ngOnChanges() {
  // use what your parent component told you to
  this.target.setType(this.type);
  // or create groupings on the fly
  this.target.setType("PARENT_" + this.model.parentId.toString());
}

It may be more convenient or easier to understand if you write:

@Input() set type(t) {
  this.source.setType(t);
}
source = this.dnd.dragSource(null, {
  beginDrag: () => ({ ... })
});
Parameters :
Name Type Optional
type string | symbol No
Returns : void

result-matching ""

    No results matching ""