<p>Here is the solution:</p>
<pre><code>  var $rows = $('#YOUR_FIELD_ID')
    .children('.input .ltr').children('.checkbox-select').children();

  new Garnish.DragSort($rows, {
    axis: 'y',
    magnetStrength: 4,
    helperLagBase: 1.5,
    helperOpacity: 0.9,
  });
</code></pre>

CC BY-SA 4.0
2023-02-27T14:34:20.323Z
2023-02-27T14:34:20.323Z
antdev
<p>i am trying to make checkboxSelectField sortable so far i have only managed with inclusion of third party scripts (sortable in jquery.ui).</p>
<p>The code looks like this:</p>
<p>Twig:</p>
<pre><code>{% import &quot;_includes/forms&quot; as forms %}

    {{ forms.checkboxSelectField({
        label: 'Activate ?',
        id: 'activated',
        name: 'activated',
        options: options,
        values: values,
        class: 'sortable'
    }) }}
</code></pre>
<p>JS:</p>
<pre><code>$(function() {
  Craft.initUiElements('.sortable');

  $('.sortable').find('.checkbox-select').sortable({
    axis: 'y',
    handle: '.checkbox-select-option',
    update: function(event, ui) {
      var values = [];
      $(this).find('input[type=&quot;checkbox&quot;]').each(function() {
        if ($(this).is(':checked')) {
          values.push($(this).val());
        }
      });
      $(this).find('input[type=&quot;hidden&quot;]').val(values.join(','));
    }
  });
});

</code></pre>
<p>i have seen that it is possible with garnish js in that case i don't need to load any other scripts how can i implement this ? unfortunately i can't find any documentation of Garnish JS</p>

<plugin-development><form><custom-fieldtype><garnish>
How to make checkboxSelectField sortable?
# How to make checkboxSelectField sortable?

(Asked by: username_0 on 2023-02-27)

i am trying to make checkboxSelectField sortable so far i have only managed with inclusion of third party scripts (sortable in jquery.ui).
The code looks like this:
Twig:
{% import "_includes/forms" as forms %}

    {{ forms.checkboxSelectField({
        label: 'Activate ?',
        id: 'activated',
        name: 'activated',
        options: options,
        values: values,
        class: 'sortable'
    }) }}

JS:
$(function() {
  Craft.initUiElements('.sortable');

  $('.sortable').find('.checkbox-select').sortable({
    axis: 'y',
    handle: '.checkbox-select-option',
    update: function(event, ui) {
      var values = [];
      $(this).find('input[type="checkbox"]').each(function() {
        if ($(this).is(':checked')) {
          values.push($(this).val());
        }
      });
      $(this).find('input[type="hidden"]').val(values.join(','));
    }
  });
});


i have seen that it is possible with garnish js in that case i don't need to load any other scripts how can i implement this ? unfortunately i can't find any documentation of Garnish JS

**Tags:** plugin-development, form, custom-fieldtype, garnish

---

## 1 answers

### Answer by username_0 on 2023-02-27. Score: 1 | Accepted answer

Here is the solution:
  var $rows = $('#YOUR_FIELD_ID')
    .children('.input .ltr').children('.checkbox-select').children();

  new Garnish.DragSort($rows, {
    axis: 'y',
    magnetStrength: 4,
    helperLagBase: 1.5,
    helperOpacity: 0.9,
  });


---

