demogorgorn/yii2-jquery-sortable

Create a flexible, opinionated sorting plugin for jQuery

dev-master 2017-03-16 05:14 UTC

BSD 3-Clause

• Oleg Martemjanov

• jquery
• bootstrap
• sortable
• extension
• widget
• yii2
• nested

README

=====================================

This is the useful widget for, in my humble opinion, the most powerful and flexible, opinionated sorting plugin for jQuery. Why another sortable plugin? you might ask. Aren't there many others? The answer is: nested lists. None of the other solutions had a decent support for nested lists. nestedSortable relies on a fixed width hierarchy. Others mimic the way jQuery UI does sortables and therefore require ugly hacks that suffer from sudden jumps.

Basic Example

The view:

<?php 
use demogorgorn\jquerysortable\Sortable;

$items = [
        [
            'content' => 'First'
            'options' => ['class' => 'panel', 'data-id' => 12]
        ],
        [
            'content' => 'Second'
            'options' => ['class' => 'panel', 'data-id' => 13],
            'items' => [
                [
                    'content' => 'Nested 1'
                    'options' => ['class' => 'panel', 'data-id' => 14]
                ],
                [
                    'content' => 'Nested 2'
                    'options' => ['class' => 'another class']
                ],

            ]

        ],
        
    ];

echo Sortable::widget([

    'listTag' => 'ol',
    'autoNestedEnabled' => true,
    'useDragHandle' => FA::icon('bars', ['style' => 'margin: 4px;']),
    'options' => [
        'class' => 'vertical',
        'id' => 'menulist',
    ],
    'items'=> $items,
    'clientOptions' => [
        'handle' => '.fa-bars',
        'onDragStart' => new \yii\web\JsExpression('function ($item, container, _super) {
                // Duplicate items of the no drop area
                if(!container.options.drop)
                    $item.clone().insertAfter($item);
                    _super($item, container);
        }'),

    ],
]); ?>

Widget's options

Please note You can set the following properties:

 * content: string, the list item content (this is not HTML encoded)
 * disabled: bool, whether the list item is disabled
 * options: array, the HTML attributes for the list item.

Installation

The preferred way to install this extension is through composer.

Either run

php composer.phar require demogorgorn/yii2-jquery-sortable "*"

or add

"demogorgorn/yii2-jquery-sortable": "*"

to the require section of your composer.json file and run composer update.