Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2018-02-12T21:38:53.127Z
Answers.LastActivityDate: 2018-02-12T21:38:53.127Z
Answers.UserDisplayName: Brandon Kelly
Body: <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>
  
Tags: <plugin-development><matrix><craft3><javascript><garnish>
Title: Craft 3 - custom callback after Garnish onDragStop
ThreadText: # 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](https://github.com/pixelandtonic/garnishjs/blob/develop/src/BaseDrag.js#L256).
  
  I've tried to dig into [Garnish events](https://github.com/pixelandtonic/garnishjs/blob/develop/src/Garnish.js#L563) 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:
  
  ```javascript
  // 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...
  });
  
  ```
  
  
  ---
  
  