vorst.ru - Статьи о задачах возникающих при создании сайта и их решении
Статьи помеченные upload

Как отсортировать картинки мышкой

Сортировка строк мышкой

Оставили комментарий в конце января: "Напишите, пожалуйста, статью, как массово загружать изображения через ajax с возможностью сортировки перетаскиванием."

Речь о расширении yii2-uploader, которое может загружать, сжимать, обрезать картинки для любой модели. Я писал о нем уже пару раз.

На тот момент этой функциональности не было. Собирался я долго. Наконец добавил требуемое. Теперь спешу написать несколько слов о процессе. Демо (при редактировании).


Как добавить атрибут к загруженному файлу

Добавление описания к файлу

Иногда важно определить дополнительную информацию для загружаемого файла. Например это может быть описание. В расширении yii2-uploader возможность добавить описание к файлу уже предусмотрена.

Кроме описания может быть добавлено и любое другое свойство. В предыдущем примере использовалось свойство when типа radio с двумя значениями - "до" и "после". Как добавить новое свойство?


Как сделать галерею фотографий "До и После"

Показ фотографий до и после момента времени

Представьте, что вы продаете курс похудания. Вам нужно наглядно представить результат вашего курса. Фото "До" и "После", что может быть лучшей иллюстрацией?

Как и в предыдущем примере примем, что участников ограниченное количество. Например 4. Забудем про похудающих - слишком скучно. Будем "работать" с кинозвездами. Для каждого можно загрузить только 4 фотографии. Таким образом всего 16 фото. Если загружены все 16 и кому-то захочется добавить "свои" фото, то придется что-то удалить. Демо.


Делаем демо для загрузки фото

Загрузка жестко определенного количества файлов

Чтобы показать, как работает загрузка изображений, нужно разрешить загружать изображения на свой сайт. Но, в этом случае, дисковое пространство может быть быстро исчерпано и нужно как-то удалять оставленный посетителями "мусор".

Обычно загруженные файлы удаляются автоматически спустя время, но можно ограничить количество файлов - демо.



Поиск



Как отсортировать картинки мышкой

Сортировка строк мышкой

Оставили комментарий в конце января: "Напишите, пожалуйста, статью, как массово загружать изображения через ajax с возможностью сортировки перетаскиванием."

Речь о расширении yii2-uploader, которое может загружать, сжимать, обрезать картинки для любой модели. Я писал о нем уже пару раз.

На тот момент этой функциональности не было. Собирался я долго. Наконец добавил требуемое. Теперь спешу написать несколько слов о процессе. Демо (при редактировании).


    Поделиться

Пусть таблица, это список строк загруженных файлов. Каждая строчка в таблице имеет 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 при вызове виджета.

Оставьте комментарий

Только зарегистрированные пользователи могут оставлять комментарии. Пожалуйста войдите или пройдите регистрацию.