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

Сортировка

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

Василий оставил комментарий в конце января

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

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

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


Что к файлу

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

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

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


До и После

галерея фотографий, загруженных до и после момента времени

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

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


Загрузка фото

делаем демо

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

Например, можно устроить, что-то вроде надписи в столовой - "Уберите, пожалуйста, за собой посуду" (демо).



Поиск



Сортировка

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

Василий оставил комментарий в конце января

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

Речь о расширении yii2-byone-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-byone-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 при вызове виджета.

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

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