При использовании Angular Material для перетаскивания элементов, чтобы поменять их в списке, мой event.currentIndex неверен - PullRequest
Новая
       31

При использовании Angular Material для перетаскивания элементов, чтобы поменять их в списке, мой event.currentIndex неверен

0 голосов
/ 02 апреля 2020

Когда я перетаскиваю элемент поверх другого в том же списке, я надеюсь, что они поменяются местами. Вместо этого элемент заменяется совершенно другим элементом в списке. После отладки я заметил, что currentIndex всегда неверно и часто это значение намного меньше ожидаемого.

Есть идеи, что я тут делаю неправильно?

Спасибо!

Демонстрация: https://angular-pphyyk.stackblitz.io

html


<div (cdkDropListDropped)="drop($event)" cdkDropList  class="outter col-lg-12">
  <div cdkDrag class="symbols col-lg-1" *ngFor="let sym of template.symbols">
    <div class="symbol">
      <img src="{{sym.imgSrc}}" />
    </div>
    <div class="letter"><p>{{sym.letter}}</p></div>
  </div>
</div>

Машинопись 

drop(event: CdkDragDrop<any>) {
    if (event.previousContainer === event.container) {
      //moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);

      var drag = event.previousIndex;
      var drop = event.currentIndex;

      var temp = this.symbols[drag];
      this.symbols[drag] = this.symbols[drop];
      this.symbols[drop] = temp;
    }

  }

css

div.outter {
  margin-top: 30px;
  padding: 25px 0px 25px 0px;
  /*border: 1px solid;*/
  display: block;
  border-radius: 4px;
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  /*opacity: 0.5;*/
  transition: 1s ease;
}
  div.template {
    padding: 20px;
  }

div.symbols {
  width: 100px;
  height: 91px;
  border: solid 1px #ccc;
  display: inline-block;
  padding: 5px;
  margin: 2px 10px 10px 0px;
  text-align: center;
  cursor: move;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  position: relative;
  z-index: 1;
  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

div.symbols:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

div.symbol {
  height: 55px;
  border-bottom: 1px solid;
  padding-bottom: 5px;
  /*display: block;*/
  /*flex-direction: row;*/
  align-items: center;
  /*justify-content: space-between;*/
  /*box-sizing: border-box;*/
}

div.letter {
  height: 40px;
  font-family:'Trebuchet MS';
  font-size: 20px;
}

  div.letter > p {
    font-family: Tahoma;
    font-size: 14px;
  }
...