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

<p>Here’s how you’d set up the listener:</p>

<pre class="lang-javascript prettyprint-override"><code>// 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...
});
</code></pre>

CC BY-SA 3.0
2018-02-12T21:38:53.127Z
2018-02-12T21:38:53.127Z
Brandon Kelly
<p>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 <code>MatrixInput.js</code>.</p>

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

<pre><code>Garnish.$doc.on('dragStop', '.matrixblock &gt; .actions &gt; .move', this.onMoveEnd.bind(this))
</code></pre>

<p>But of course that did not work. The <code>Craft.MatrixInput</code> contains a the function</p>

<pre><code>this.blockSort = new Garnish.DragSort($blocks, {
    handle: '&gt; .actions &gt; .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)
});
</code></pre>

<p>Can anyone please tell me how to extend this without breaking Craft updates?</p>

<p>Accessing this event with <code>Craft.MatrixInput.blockSort</code> to attach something does not work either and I'm not sure how I can make use of the <code>this.trigger('dragStop');</code> <a href="https://github.com/pixelandtonic/garnishjs/blob/develop/src/BaseDrag.js#L256" rel="nofollow noreferrer">event</a>.</p>

<p>I've tried to dig into <a href="https://github.com/pixelandtonic/garnishjs/blob/develop/src/Garnish.js#L563" rel="nofollow noreferrer">Garnish events</a> to attach the handlers, but I'm not sure how. <code>Garnish.on</code> does not work, <code>Garnish.Drag.on</code> either, <code>Garnish.Base</code> returns a function but <code>Garnish.Base()</code> returns undefined. </p>

<plugin-development><matrix><craft3><javascript><garnish>
Craft 3 - custom callback after Garnish onDragStop
# Craft 3 - custom callback after Garnish onDragStop

(Asked by: username_0 on 2018-02-12)

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.

**Tags:** plugin-development, matrix, craft3, javascript, garnish

---

## 1 answers

### Answer by username_1 on 2018-02-12. Score: 3 | Accepted answer

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...
});


---

