Craft 3 - custom callback after Garnish onDragStop

Question

I would like to trigger a custom javascript function after an element in a matrix block was moved in the matrix but I'm not sure how to attach the event without changing the MatrixInput.js.

So far I've tried the easy way with attaching element handler in my plugins init() function

Garnish.$doc.on('dragStop', '.matrixblock > .actions > .move', this.onMoveEnd.bind(this))

But of course that did not work. The Craft.MatrixInput contains a the function

this.blockSort = new Garnish.DragSort($blocks, {
    handle: '> .actions > .move',
    axis: 'y',
    filter: $.proxy(function() {
        // Only return all the selected items if the target item is selected
        if (this.blockSort.$targetItem.hasClass('sel')) {
            return this.blockSelect.getSelectedItems();
        }
        else {
            return this.blockSort.$targetItem;
        }
    }, this),
    collapseDraggees: true,
    magnetStrength: 4,
    helperLagBase: 1.5,
    helperOpacity: 0.9,
    onSortChange: $.proxy(function() {
        this.blockSelect.resetItemOrder();
    }, this)
});

Can anyone please tell me how to extend this without breaking Craft updates?

Accessing this event with Craft.MatrixInput.blockSort to attach something does not work either and I'm not sure how I can make use of the this.trigger('dragStop'); event.

I've tried to dig into Garnish events to attach the handlers, but I'm not sure how. Garnish.on does not work, Garnish.Drag.on either, Garnish.Base returns a function but Garnish.Base() returns undefined.

Answer 1

Garnish’s Base class introduces its own concept of events, that is separate from DOM events.

Here’s how you’d set up the listener:

// get the Craft.MatrixInput object
var matrix = $('.matrix-field').data('matrix');

// attach a handler to its block sorter's sortChange event
matrix.blockSort.on('sortChange', function() {
    // event handler...
});