Sortable supports configuration of the bootstrap library version so that you can use this either with any Bootstrap version 3.x and above. For setting up the bootstrap version for your extension, you can configure the Sortable::bsVersion property to one of the following.

• To use with bootstrap 3 library - you can set Sortable::bsVersion property to any string starting with 3 (e.g. 3 or 3.3.7 or 3.x)

• To use with bootstrap 4 library - you can set Sortable::bsVersion property to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

• To use with bootstrap 5 library - you can set Sortable::bsVersion property to any string starting with 5 (e.g. 5 or 5.1.0 or 5.x)

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

"yiisoft/yii2-bootstrap5": "@dev"

"yiisoft/yii2-bootstrap4": "@dev"

"yiisoft/yii2-bootstrap": "@dev"

The yii2-sortable extension can be installed automatically or manually using one of these options:

$ php composer.phar require kartik-v/yii2-sortable "dev-master"

"kartik-v/yii2-sortable": "dev-master"

• bsVersion: string | int, the bootstrap library version to be used for the extension. Refer the Bootstrap Info section for details and pre-requisites on setting this property.

  • To use with Bootstrap library - you can set this to any string starting with 3 (e.g. 3 or 3.3.7 or 4.x / 3.x)

  • To use with bootstrap 4 - you can set this to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

  • To use with bootstrap 5 - you can set this to any string starting with 4 (e.g. 5 or 5.1.0 or 5.x)

• bsColCssPrefixes: array, the bootstrap grid column css prefixes mapping, the key is the bootstrap versions, and the value is an array containing the sizes and their corresponding grid column css prefixes. The class using this trait, must implement kartik\base\BootstrapInterface. If not set will default to:.

  [
     3 => [
        self::SIZE_X_SMALL => 'col-xs-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-lg-',
        self::SIZE_XX_LARGE => 'col-lg-',
     ],
     4 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xl-',
     ],
     5 => [
        self::SIZE_X_SMALL => 'col-',
        self::SIZE_SMALL => 'col-sm-',
        self::SIZE_MEDIUM => 'col-md-',
        self::SIZE_LARGE => 'col-lg-',
        self::SIZE_X_LARGE => 'col-xl-',
        self::SIZE_XX_LARGE => 'col-xxl-',
     ],
  ];
  

• type: string, the type of the sortable widget. Defaults to Sortable::TYPE_LIST. Should be one of

  • Sortable::TYPE_LIST or list

  • Sortable::TYPE_GRID or grid

• connected: boolean|string, whether this widget is connected to another Sortable widget. Defaults to false. The connected property will follow these rules:

  • if set to false or null / empty, this widget will not be connected to any other sortable widget.

  • if set to true, this widget will be connected to all other sortable widgets on the page with connected property set to true.

  • if set to a string, this widget will be connected with other sortable widgets matching the same connected string value.

• disabled: boolean, whether this widget is disabled after rendering. Defaults to false.

• showHandle: boolean, whether to show handle for each sortable item. Defaults to false.

• handleLabel: string, the label to show for the handle when showHandle is set to true. This is not HTML encoded. Defaults to:

  • '<i class="fas fa-move"><i> ': when bsVersion is set to 3.x.

  • '<i class="fas fa-arrows-alt"><i> ': when bsVersion is set to 4.x or 5.x.

• itemOptions: array the HTML attributes to be applied to all items. This will be merged with and be overridden by the options property set within items configuration.

• items: array the sortable items configuration for rendering elements within the sortable list / grid. You can set the following properties:

  • content: string, the list item content (this is not HTML encoded).

  • disabled: boolean, whether the list item is disabled.

  • options: string, the HTML attributes for the list item. This will be merged with and override the itemOptions property set at the widget level.

• options: array the HTML attributes for the main sortable widget container.

• pluginOptions: array the JQuery plugin options for the html5sortable plugin. You can control many options for the plugin. Refer the plugin documentation for details.

• pluginEvents: array the bootstrap-sortable plugin events. You must define events in event-name => event-function format. Refer the plugin documentation for details. The most important event in this plugin is sortupdate, which is triggered when the user stopped sorting and the DOM position has changed. All events will be stacked in the sequence passed. For example:

  pluginEvents = [
      'sortupdate' => 'function() { log("sortupdate"); }',
  ];
  

use kartik\sortable\Sortable;

// A sortable list.
echo Sortable::widget([
    'items'=>[
        ['content'=>'Item 1'],
        ['content'=>'Item 2'],
        ['content'=>'Item 3'],
        ['content'=>'Item 4'],
    ]
]);
// A sortable grid with formatted item content.
echo Sortable::widget([
    'type'=>'grid',
    'items'=>[
        ['content'=>'<div class="grid-item text-danger">Item 1</div>'],
        ['content'=>'<div class="grid-item text-danger">Item 2</div>'],
        ['content'=>'<div class="grid-item text-danger">Item 3</div>'],
        ['content'=>'<div class="grid-item text-danger">Item 4</div>'],
        ['content'=>'<div class="grid-item text-danger">Item 5</div>'],
        ['content'=>'<div class="grid-item text-danger">Item 6</div>'],
        ['content'=>'<div class="grid-item text-danger">Item 7</div>'],
        ['content'=>'<div class="grid-item text-danger">Item 8</div>'],
        ['content'=>'<div class="grid-item text-danger">Item 9</div>'],
        ['content'=>'<div class="grid-item text-danger">Item 10</div>'],
    ]
]);
// A sortable list with handles.
echo Sortable::widget([
    'showHandle'=>true,
    'items'=>[
        ['content'=>'Item 1'],
        ['content'=>'Item 2'],
        ['content'=>'Item 3'],
        ['content'=>'Item 4'],
    ]
]);
// A sortable list with disabled items.
echo Sortable::widget([
    'items'=>[
        ['content'=>'Item 1'],
        ['content'=>'Item 2'],
        ['content'=>'Item 3', 'disabled'=>true],
        ['content'=>'Item 4', 'disabled'=>true],
    ]
]);
// Disable entire sortable widget on load.
echo Sortable::widget([
    'disabled'=>true,
    'itemOptions'=>['class'=>'disabled'],
    'items'=>[
        ['content'=>'Item 1'],
        ['content'=>'Item 2'],
        ['content'=>'Item 3'],
        ['content'=>'Item 4'],
    ]
]);
// Two connected Sortable lists with custom styles.
echo Sortable::widget([
    'connected'=>true,
    'items'=>[
        ['content'=>'From Item 1'],
        ['content'=>'From Item 2'],
        ['content'=>'From Item 3'],
        ['content'=>'From Item 4'],
    ]
]);
echo Sortable::widget([
    'connected'=>true,
    'itemOptions'=>['class'=>'alert alert-warning'],
    'items'=>[
        ['content'=>'To Item 1'],
        ['content'=>'To Item 2'],
        ['content'=>'To Item 3'],
        ['content'=>'To Item 4'],
    ]
]);
echo '<div class="clearfix"></div>';

yii2-widgets is released under the BSD-3-Clause License. See the bundled LICENSE.md for details.