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.

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.

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

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: () => ({ ... })
});