Skip to main content

Home > @jsplumbtoolkit/browser-ui-angular-drop > jsPlumbSurfaceDropComponent

jsPlumbSurfaceDropComponent class#

This directive provides a means for you to configure the ability to drag/drop nodes and groups from some part of your UI into the canvas.


export declare class jsPlumbSurfaceDropComponent<T> 


(constructor)(el, $jsplumb)Constructs a new instance of the jsPlumbSurfaceDropComponent class


allowDropOnCanvasstringDefaults to true. Allows items to be dropped onto whitespace.
allowDropOnEdgestringDefaults to true. Allows items to be dropped onto edges in the canvas.
allowDropOnGroupstringDefaults to true. Allows items to be dropped onto groups in the canvas.
allowDropOnNodestringDefaults to false. Allows items to be dropped onto nodes in the canvas. If this is true and an element is dropped onto a node, the result is the same as if the element has been dropped onto whitespace.
canvasSelectorstringOptional extra selector to use when dragging to identify parts of the surface's canvas that should be considered whitespace. If you use a decorator, for instance, or have otherwise positioned elements on your canvas, these elements will not by default be considered whitespace.
dataGeneratorDataGeneratorFunction<T>Function to use to generate an initial payload when the user starts to drag something from this component. Optional, but you should almost certainly consider providing this, or a typeGenerator, since without one of these it is not possible to determine the type of object beind dragged.
groupIdentifierGroupIdentifierFunction<T>Optional function to use to determine if the object that is being dragged represents a group. If this function is present, and returns true, then the drag object is considered to be a group. In all other cases the drag object is considered to be a node.
selectorstringCSS3 selector identifying the child elements of the the element on which this directive was declared that act as drag sources.
surfaceIdstringID of the surface to attach to.
typeGeneratorTypeGeneratorFunction<T>Optional function to use to determine the type of object that a user has just started dragging