Custom block drag strategies

  • Block drag strategies define how a block handles drags, enabling custom drag behaviors like duplicating on drag.

  • To create a block drag strategy, implement the IDragStrategy interface, which has most methods of IDraggable except getRelativeToSurfaceXY.

  • You apply a custom drag strategy to a block instance within its init method using the setDragStrategy method.

A block drag strategy is an object that determines how a block should handle drags. They implement the logic to make a block a draggable. Creating new block drag strategies lets you switch out how blocks should handle drags without having to deal with creating a custom selectable, or handling selection.

For example, you might want your block to duplicate on drag, rather than dragging normally. Block drag strategies allow you to do that.

Drag strategies have all the same methods as an IDraggable, besides the getRelativeToSurfaceXY method.

Implementation

To create a drag strategy, you need to implement the IDragStrategy interface. This requires all the same methods as the IDraggable interface, except for the getRelativeToSurfaceXY method, which the block already implements.

You can follow the instructions for implementing a draggable to implement your drag strategy, but skip implementing getRelativeToSurfaceXY().

Usage

To use a custom drag strategy, you need to apply the drag strategy to each instance of a block. You can do this in the init method of your block, by calling setDragStrategy.

Blockly.Blocks['my_block'] = {
  init: function() {
    // Other initialization...
    this.setDragStrategy(new MyDragStrategy());
    // Other initialization...
  }
}