Answers.Body: <p>Sure, I've had experience with two different types of sorting with <a href="https://github.com/engram-design/SuperTable/blob/master/supertable/resources/js/SuperTableInput.js#L32" rel="nofollow noreferrer">SuperTable</a> (check the link for associated JS).</p>
  
  <p>If you're modelling the fieldtype after a table, you might like to use the <code>Craft.DataTableSorter</code> method. Its pretty restrictive to a table layout, and you'll need to give each <code>tr</code> element a <code>data-id</code>.</p>
  
  <pre><code>Craft.FieldType = Garnish.Base.extend({
      sorter: null,
  
      init: function() {
          var $table = $container.children('.table');
  
          this.sorter = new Craft.DataTableSorter($table, {
              helperClass: 'editabletablesorthelper',
              copyDraggeeInputValuesToHelper: true
          });
      },
  
      addRow: function() {
          var $tr = $('&lt;tr/&gt;');
          this.sorter.addItems($tr);
      }
  });
  </code></pre>
  
  <p>Or, for more abstract sorting, you can have more control using <code>Garnish.DragSort</code> - essentially a general drag and sort function. This is what Matrix uses.</p>
  
  <pre><code>Craft.FieldType = Garnish.Base.extend({
      sorter: null,
  
      init: function() {
          var $rows = $container.children('.table-rows');
  
          this.sorter = new Garnish.DragSort($rows, {
              handle: 'tfoot .move',
              axis: 'y',
              collapseDraggees: true,
              magnetStrength: 4,
              helperLagBase: 1.5,
              helperOpacity: 0.9,
          });
      },
  
      addRow: function() {
          var $tr = $('&lt;tr/&gt;');
          this.sorter.addItems($tr);
      }
  });
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2015-09-20T06:05:00.767Z
Answers.LastActivityDate: 2018-06-12T23:42:53.823Z
Answers.LastEditDate: 2018-06-12T23:42:53.823Z
Answers.UserDisplayName: crawf
Body: <p>I am working on a field type that is similar to the table field type. Is it possible to tap into Garnish for the sorting. I’ve tried a few things and have had no luck. Can anyone help me out?</p>
  
Tags: <sorting><garnish>
Title: How can I use Garnish to sort?
ThreadText: # How can I use Garnish to sort?
  
  (Asked by: username_0 on 2015-09-20)
  
  I am working on a field type that is similar to the table field type. Is it possible to tap into Garnish for the sorting. I’ve tried a few things and have had no luck. Can anyone help me out?
  
  **Tags:** sorting, garnish
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2015-09-20. Score: 5
  
  Sure, I've had experience with two different types of sorting with [SuperTable](https://github.com/engram-design/SuperTable/blob/master/supertable/resources/js/SuperTableInput.js#L32) (check the link for associated JS).
  
  If you're modelling the fieldtype after a table, you might like to use the `Craft.DataTableSorter` method. Its pretty restrictive to a table layout, and you'll need to give each `tr` element a `data-id`.
  
  ```
  Craft.FieldType = Garnish.Base.extend({
      sorter: null,
  
      init: function() {
          var $table = $container.children('.table');
  
          this.sorter = new Craft.DataTableSorter($table, {
              helperClass: 'editabletablesorthelper',
              copyDraggeeInputValuesToHelper: true
          });
      },
  
      addRow: function() {
          var $tr = $('<tr/>');
          this.sorter.addItems($tr);
      }
  });
  
  ```
  
  Or, for more abstract sorting, you can have more control using `Garnish.DragSort` - essentially a general drag and sort function. This is what Matrix uses.
  
  ```
  Craft.FieldType = Garnish.Base.extend({
      sorter: null,
  
      init: function() {
          var $rows = $container.children('.table-rows');
  
          this.sorter = new Garnish.DragSort($rows, {
              handle: 'tfoot .move',
              axis: 'y',
              collapseDraggees: true,
              magnetStrength: 4,
              helperLagBase: 1.5,
              helperOpacity: 0.9,
          });
      },
  
      addRow: function() {
          var $tr = $('<tr/>');
          this.sorter.addItems($tr);
      }
  });
  
  ```
  
  
  ---
  
  