Как я могу динамически переупорядочить массив после перетаскивания плитки?

0

У меня есть приложение с массивом (selectedTiles). Каждая плитка в массиве имеет 2 свойства, которые определяют расположение этой плитки на макете страницы (Col (umn) и Row).

ссылка на plunkr

<div gridster>
    <ul>
        <li gridster-item="item" ng-repeat="tile in selectedTiles"></li>
    </ul>
</div>

Поведение проблемы: когда я перемещаю плитку (например: обмениваем две плитки), свойства "tile.col" и "tile.row" изменяют свои значения для каждой плитки, чтобы соответствовать новой позиции сетки. Однако порядок индексированного массива остается прежним. Это делает неуправляемую навигацию клавиатуры, если она перемещается на следующую плиту на следующую позицию индекса.

* Goal Behavior Поэтому мне нужно создать новый массив, который подталкивает каждую плиту в SelectedTiles в новый массив, который принимает свойства tile.col и tile.row и сортирует их так:

$scope.selectedTiles = [
  { row: 0, col: 0 },
  { row: 0, col: 1 },
  { row: 0, col: 2 },
  { row: 0, col: 3 }.
  { row: 1, col: 0 },
  { row: 1, col: 1 },
  { row: 1, col: 2 },
  { row: 1, col: 3 },
  { row: 2, col: 0 },
  { row: 2, col: 1 },
  { row: 2, col: 2 },
  { row: 2, col: 3 }
];

Таким образом, индексный порядок следует за шаблоном, имеющим самый верхний левый фрагмент, как индекс [0], и самый нижний правый фрагмент в качестве последнего индекса в массиве каждый раз при перемещении плитки.

Я не знаю, как это сделать

  • 0
    Используйте события вашего перетаскивания, чтобы отслеживать начальный индекс и получить новый индекс. Используйте splice() чтобы переместить элемент из текущего местоположения в массиве в новое
  • 0
    Начните с чтения API событий вашего гридстера
Теги:

2 ответа

0

Здесь хорошая функция для сортировки массивов объектов по нескольким свойствам, как по восходящей, так и по нисходящей. Например, в строке doc функции.

function dynamicSort(property) {
  var sortOrder = 1;
  if(property[0] === "-") {
    sortOrder = -1;
    property = property.substr(1);
  }
  return function (a,b) {
    var result = (a[property] < b[property]) ? -1 : (a[property] > b[property]) ? 1 : 0;
    return result * sortOrder;
  }
} // dynamicSort()

function dynamicSortMultiple() {
  /*
   * save the arguments object as it will be overwritten
   * note that arguments object is an array-like object
   * consisting of the names of the properties to sort BY
   *
   * Example:
   *
   * var People = [
   *   {Name: "Name", Surname: "RRR"},
   *   {Name: "AAA",  Surname: "ZZZ"},
   *   {Name: "Name", Surname: "AAA"},
   *   {Name: "Name", Surname: "MPF"},
   *   {Name: "AAA",  Surname: "YYY"}
   * ];
   * People.sort(dynamicSort("Surname"));
   * People.sort(dynamicSortMultiple("Name", "-Surname"));
   */
  var props = arguments;
  return function (obj1, obj2) {
    var i = 0, result = 0, numberOfProperties = props.length;
    /* try getting a different result from 0 (equal)
     * as long as we have extra properties to compare
     */
    while(result === 0 && i < numberOfProperties) {
      result = dynamicSort(props[i])(obj1, obj2);
      i++;
    }
    return result;
  }
} // dynamicSortMultiple()

Исходное сообщение: сортировка массива объектов по значению свойства строки в JavaScript

Поделиться
  • 0
    Это сбивает с толку, чтобы следовать. Я не знаю, как подключить мой массив объектов, чтобы соответствовать, где они будут вставлены с примером, который вы предоставили
  • 0
    Вы не "подключаете его", вы просто используете его: $scope.selectedTiles.sort(dynamicSortMultiple("row", "col")); Вы можете использовать эти функции с любым массивом. Просто вызовите myArray.sort( ... ) как показано в примере выше, с массивом People .
0

Если я правильно понял ваш вопрос, вы попытались отсортировать массив на основе значений строк/столбцов после того, как они были изменены. Ниже приведен один из способов сделать это. Я добавил свойство id для каждого элемента, чтобы сделать то, что будет очевидно.

function compare(a, b) {
  if (a.row < b.row) {
    return -1;
  } else if (a.row > b.row) {
    return 1;
  } else {
    if (a.col < b.col) {
      return -1;
    } else if (a.col > b.col) {
      return 1;
    } else {
      return 0;
    }
  }
}

var newItems = items.sort(compare);

console.log(JSON.stringify(newItems));

Скажем, некоторые значения строк/столбцов были изменены, тогда он будет сортировать это:

var items = [
      { row: 2, col: 3, id: 1 },
      { row: 0, col: 1, id: 2 },
      { row: 0, col: 2, id: 3 },
      { row: 0, col: 3, id: 4 },
      { row: 1, col: 0, id: 5 },
      { row: 1, col: 1, id: 6 },
      { row: 1, col: 2, id: 7 },
      { row: 1, col: 3, id: 8 },
      { row: 2, col: 2, id: 9 },
      { row: 2, col: 1, id: 10 },
      { row: 2, col: 0, id: 11 },
      { row: 0, col: 0, id: 12 }
      ];

В следующее (вы можете скопировать его обратно в любую структуру, необходимую для отображения на экране):

[
{"row":0,"col":0,"id":12},
{"row":0,"col":1,"id":2},
{"row":0,"col":2,"id":3},
{"row":0,"col":3,"id":4}, 
{"row":1,"col":0,"id":5},
{"row":1,"col":1,"id":6},
{"row":1,"col":2,"id":7},
{"row":1,"col":3,"id":8},
{"row":2,"col":0,"id":11},
{"row":2,"col":1,"id":10},
{"row":2,"col":2,"id":9},
{"row":2,"col":3,"id":1}
]
Поделиться
  • 0
    plnkr.co/edit/Kqv44Kh6uVlcrS1j5mgQ (это только сортировка. Посмотрите на файл script.js)
  • 0
    спасибо, у меня есть toruble понимание функции сравнения, которую вы написали. Что такое a и b в параметрах, и что означает возвращаемое значение?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню