Skip to main content

Element 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.

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-vanilla-2"

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-vanilla-2"

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:

Home > @jsplumbtoolkit/browser-ui > SurfaceGridOptions

SurfaceGridOptions interface​

Options for the grid in a Surface.

Signature:

export interface SurfaceGridOptions

Properties​

PropertyModifiersTypeDescription
fitGroupsToGrid?boolean(Optional) 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(Optional) width/height of the grid
snap?boolean(Optional) 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/core"

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/core"

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

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