SortableInput 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 SortableInput::bsVersion property to one of the following.

• To use with bootstrap 3 library - you can set SortableInput::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 SortableInput::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 SortableInput::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-input extension can be installed automatically or manually using one of these options:

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

"kartik-v/yii2-sortable-input": "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-',
     ],
  ];
  

• sortableOptions: array, the widget options for the kartik\sortable\Sortable widget. Refer the yii2-sortable documentation for usage. All widget options except the items property can be passed. The items configuration will be generated through the items property within this widget.

• delimiter: string, the delimiter that will be used for separating the id key values to store the sorted values in the hidden input. Defaults to ,.

• items: array, the sortable data list. This, will be used to render the Sortable list and store the sortable keys. You must set it up as $key => $value format, where:

  • key: int/string, the unique identifier (key) for the item, which will be internally stored.

  • value: array, is the configuration for the items array in sortable widget and can consist of the following properties:

    • content: string, the content to display for the item (this is not HTML encoded). If this is not set, it will default the key value.

    • 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 within sortableOptions.

• hideInput: bool, whether to hide the input that stores the delimited sort order keys. Defaults to true. If set to false, this will generate a text input.

• options: array the HTML attributes for the input tag. Defaults to ['class' => 'form-control'].

use kartik\sortinput\SortableInput;

// Scenario # 1: Basic horizontal sortable-input with ActiveForm. Display
// the stored value of the delimited sort order and set it to readonly.
echo $form->field($model, 'sort_list')->widget(SortableInput::classname(), [
'items' => [
1 => ['content' => 'Item # 1'],
2 => ['content' => 'Item # 2'],
3 => ['content' => 'Item # 3'],
4 => ['content' => 'Item # 4'],
5 => ['content' => 'Item # 5'],
],
'hideInput' => false,
'options' => ['class'=>'form-control', 'readonly'=>true]
]);

// Scenario # 2: Advanced usage without ActiveForm or model and hide the stored value. 
// Style your sortable content and disable certain values in the list from sorting.
echo SortableInput::widget([
'name'=> 'sort_list_1',
'items' => [
1 => ['content' => '<i class="fas fa-cog"></i> Item # 1'],
2 => ['content' => '<i class="fas fa-cog"></i> Item # 2'],
3 => ['content' => '<i class="fas fa-cog"></i> Item # 3'],
4 => ['content' => '<i class="fas fa-cog"></i> Item # 4'],
5 => ['content' => '<i class="fas fa-cog"></i> Item # 5', 'disabled'=>true]
],
'hideInput' => true,
]);

// Scenario # 3: Extend scenario # 2 to show how items automatically reorder based on initial value passed. 
// Also any reordered values are reset, when the form is reset.
echo SortableInput::widget([
'name'=> 'sort_list_2',
'value'=>'3,4,2,1,5',
'items' => [
1 => ['content' => '<i class="fas fa-cog"></i> Item # 1'],
2 => ['content' => '<i class="fas fa-cog"></i> Item # 2'],
3 => ['content' => '<i class="fas fa-cog"></i> Item # 3'],
4 => ['content' => '<i class="fas fa-cog"></i> Item # 4'],
5 => ['content' => '<i class="fas fa-cog"></i> Item # 5', 'disabled'=>true]
],
'hideInput' => false,
'options' => ['class'=>'form-control', 'readonly'=>true]
]);

// Scenario # 4: Advanced usage with Sortable widget option styles. For 
// example render a grid layout instead of a list. Note, if you
// do not pass the keys, the default array keys will be used.
echo SortableInput::widget([
'name'=> 'sort_list_2',
'value'=>'3,4,2,1,5',
'items' => [
1 => ['content' => '<i class="fas fa-cog"></i> Item # 1'],
2 => ['content' => '<i class="fas fa-cog"></i> Item # 2'],
3 => ['content' => '<i class="fas fa-cog"></i> Item # 3'],
4 => ['content' => '<i class="fas fa-cog"></i> Item # 4'],
5 => ['content' => '<i class="fas fa-cog"></i> Item # 5', 'disabled'=>true]
],
'hideInput' => false,
'options' => ['class'=>'form-control', 'readonly'=>true]
]);

// Scenario # 5:Connected sortables where one can modify connected sortable inputs.
echo '<div class="row">';
echo '<div class="col-sm-6">';
echo SortableInput::widget([
'name'=>'kv-conn-1',
'items' => [
1 => ['content' => 'Item # 1'],
2 => ['content' => 'Item # 2'],
3 => ['content' => 'Item # 3'],
4 => ['content' => 'Item # 4'],
5 => ['content' => 'Item # 5'],
],
'hideInput' => false,
'sortableOptions' => [
'connected'=>true,
],
'options' => ['class'=>'form-control', 'readonly'=>true]
]);
echo '</div>';
echo '<div class="col-sm-6">';
echo SortableInput::widget([
'name'=>'kv-conn-2',
'items' => [
10 => ['content' => 'Item # 10'],
20 => ['content' => 'Item # 20'],
30 => ['content' => 'Item # 30'],
40 => ['content' => 'Item # 40'],
50 => ['content' => 'Item # 50'],
],
'hideInput' => false,
'sortableOptions' => [
'itemOptions'=>['class'=>'alert alert-warning'],
'connected'=>true,
],
'options' => ['class'=>'form-control', 'readonly'=>true]
]);
echo '</div>';
echo '</div>';
echo Html::resetButton('Reset Form', ['class'=>'btn btn-secondary btn-default']);

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