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

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

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

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