Answers.Body: <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>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-02-27T14:34:20.323Z
Answers.LastActivityDate: 2023-02-27T14:34:20.323Z
Answers.UserDisplayName: antdev
Body: <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>
  
Tags: <plugin-development><form><custom-fieldtype><garnish>
Title: How to make checkboxSelectField sortable?
ThreadText: # 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,
    });
  
  ```
  
  
  ---
  
  