I2Djs-v3
  • Introduction to I2Djs
  • Getting Started
    • Installation
    • Quick Start
    • Resources
  • Guide
    • Canvas: Create-animate
    • SVG: Create-animate
    • WebGL: Create-animate
    • Data Join-Action
    • Animation-Chaining
    • Canvas: Textures & Sprite animation
    • Canvas: Heatmap
    • WebGL: Heatmap
    • WebGL: Custom Shaders
    • Canvas: GeoWorld Map with D3 modules
    • Canvas: Clipping, Masking, Pattern
    • SVG: Clipping, Masking, Pattern
    • I2Djs + Physics Engine - MatterJs
  • API Reference
    • Layers
      • Canvas Layer
      • SVG Layer
      • WebGL Layer
    • Elements API
    • Canvas additional features
    • WebGL additional features
      • Custom Shader
      • Geometry
      • Render Target
      • Texture Object
    • Join Action
    • Animation
    • Chaining
    • Path
    • Events
    • Behaviour
      • Zoom and Pan
      • Drag
  • Examples
    • Canvas
    • SVG
    • WebGL
Powered by GitBook
On this page
  • Drag:-
  • Usage:

Was this helpful?

  1. API Reference
  2. Behaviour

Drag

Drag:-

drag() API is used to define drag interactions on the layer. It extends the dom events to facilitate drag behavior. Drag interactions consist of 3 actions - dragStart, drag, dragEnd.

Syntax:

let dragInstance = i2d.behaviour.drag()

dragStart: Triggered on drag starts.

dragInstance.dragStart(function(event){

})

drag: Triggered continuously on drag. It will be triggered after dragStart till dragEnd.

dragInstance.drag(function(event){

})

dragEnd: Triggered once on drag ends.

dragInstance.dragEnd(function(event){

})

Usage:

let dragInstance = i2d.behaviour.drag()
dragInstance.dragStart(function (event) {
    node.setAttr('transform', event.transform);
});
dragInstance.drag(function (event) {
    node.setAttr('transform', event.transform);
});
dragInstance.dragEnd(function (event) {
    node.setAttr('transform', event.transform);
});

node.on('drag', dragInstance);
PreviousZoom and PanNextExamples

Last updated 4 years ago

Was this helpful?