Skip to main content

Node/group dragging

By default, all node/group elements rendered by a surface will be made draggable, and the default behaviour of a draggable element is that it can be dragged to anywhere on the canvas. No special treatment is needed for touch devices - the surface abstracts that away.

Drag options​

You can provide dragOptions to the render call (or in the render params if you're using a library integration). The most common reason for doing this is that you want to restrict the areas of your elements that your users can use to drag the element, for which you can provide a filter:

toolkit.render(someElement, {
    ...
    dragOptions:{
        filter:".someClass, .someClass *, .someOtherClass *"
    }
})

This instructs the Toolkit to not allow dragging to start when the mousedown event occurs on an element that matches the given selector.

The full list of options is:

Interface SurfaceDragOptions

Options for element drag in a Surface.

Members

addHelperClasses?: boolean
Defaults to true, meaning that when element dragging is occurring a class is added to the document body and also to the surface container.
constrainFunction?:
Optional function to use to constrain element dragging.
filter?: string
Optional CSS3 selector identifying parts of nodes/groups that should not cause a drag to start.

Preventing dragging​

Dragging can be switched off in a couple of ways. If you wish to switch off dragging for all elements you can set that in your render params:

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const tk = newInstance()
const surface = tk.render(someElement, {
    ...
    elementsDraggable:false
})

If you want to enable/disable dragging for some specific element on an ad-hoc basis you can use the setDraggable method:

import { newInstance } from "@jsplumbtoolkit/browser-ui"

const tk = newInstance()
const surface = tk.render(someElement, {
    ...
})
tk.load({
    data:{
        nodes:[
            { id:"1", label:"First Node" }
        ]
    }
})

surface.setDraggable("1", false)          // mark node "1" as not draggable, using its id

setDraggable takes as argument either a vertex id, a vertex object, or a DOM element.

Dragging on a grid​

You can impose a grid on the elements in a surface:

const surface = toolkit.render(someElement, {
    grid:{
        size:{w:50, h:50}
    }
})

The full list of options supported by grid are defined in the SurfaceGridOptions interface:

Interface SurfaceGridOptions

Options for the grid on a surface

Members

fitGroupsToGrid?: boolean
Whether or not to ensure calculated group sizes (from auto sized groups) are a multiple of the grid size in each axis. Defaults to false.
size?: Grid
width/height of the grid
snap?: boolean
Whether or not to snap elements to the grid when dragging. Defaults to false.

Drag events​

The surface posts a few events to which you can subscribe in order to track the movement of vertices on your canvas. These events can be subscribed to either when creating the surface:

import { EVENT_NODE_MOVE_END } from "@jsplumbtoolkit/browser-ui"

const surface = toolkit.render(someElement, {
    events:{
        [EVENT_NODE_MOVE_END]:(params) => {
            // a node was moved
        }
    }
})

or you can bind to them after creating the surface:

import { EVENT_NODE_MOVE_END } from "@jsplumbtoolkit/browser-ui"

const surface = toolkit.render(someElement, {
    ...
})

surface.bind(EVENT_NODE_MOVE_END, (params) => {
    // a node was moved
})