• 1. Делаем демо для загрузки фото
• 2. Как сделать галерею фотографий "До и После"
• 3. Как добавить атрибут к загруженному файлу
• 4. Как отсортировать картинки мышкой

---

Пусть таблица, это список строк загруженных файлов. Каждая строчка в таблице имеет ID.

В начале перетаскивания (кнопка мыши только нажата) необходимо считать по порядку ID всех строк. Когда перетаскивание закончилось (кнопка отпущена), нужно опять собрать по порядку ID всех строк.

Если порядок идентичный - перемещение строк не состоялось. Иначе нужно зафиксировать новый порядок строк.

Таков нехитрый алгоритм. Реализация с помощью jquery ui тоже не сложная.

$( function() {
    var before, after;
    function getRowsIds() {
        // get rows by .table selector
        var rows = $('#files-div .table li'), a = []; i = 0;
        $.each(rows, function(index, row) {
            // id is "row-123"
            a[i++] = row.id.substr(4);
        });
        return JSON.stringify(a);
    }
    $( "#sortable" ).sortable({
        revert: true,
        start: function( event, ui ) {before = getRowsIds()},
        update: function( event, ui ) {
            after = getRowsIds();
            if(before != after) {
                // save new order
                $.ajax({
                    method: "POST",
                    url: "controller/swap",
                    data: {ids: after},
                    success: function(id, status, xhr) {}
                });
            }
        }
    });
    $( "#draggable" ).draggable({
        connectToSortable: "#sortable",
        helper: "clone",
        revert: "invalid"
    });
    $( "ul, li" ).disableSelection();
});

Осталось определить в контроллере действие, записывающее новый порядок по ajax-запросу.

В расширении yii2-uploader информация обо всех загруженных файлах хранится в одной таблице OneFile. Поэтому действие очень короткое.

public function actionSwap()
{
    if(Yii::$app->request->isAjax)
    {
        $ids = json_decode(Yii::$app->request->post('ids'));
        $time = time(); $j = 0;
        for($i = 0; $i < count($ids); $i++) {
            $model = OneFile::findOne($ids[$i]);
            // rows will be sorted by time
            $model->created_at = $time + $i;
            if($model->save()) $j++;
        }
        echo $j;
    }
}

Сортировка строк будет выполняться по полю created_at. Соответственно, при выборе всех файлов, принадлежащих модели, нужно добавить сортировку. Например для модели Post.

public function getFiles()
{
    return $this->hasMany(OneFile::className(), ['parent_id' => 'id'])
        ->where('model=:model', [':model' => 'common\models\Post'])
        ->orderBy('created_at');
}

Новый порядок строк сохраняется при каждом перетаскивании. Значит меняются местами только две строки и ID остальных строк можно не передавать на сервер. Как? Вы можете посмотреть на gitHub.

Заключение

Собственно это только анонс нового свойства модуля загрузки фото и вообще файлов. Возможность сортировать строки перетаскиванием по умолчанию отключена и нужно не забыть установить флаг draggable при вызове виджета.