Угловой 7 - Перетаскивание с родительским контейнером - PullRequest
Новая
       42

Угловой 7 - Перетаскивание с родительским контейнером

0 голосов
/ 29 октября 2018

Я пытаюсь использовать новый Angular 7 CDK Drag and drop для перемещения списка элементов на моем сайте, которые добавляются динамически.

Используя этот пример , взятый из примеров угловых документов и измененный для моих нужд, вы можете видеть, что у меня есть список элементов с опускаемым контейнером.

Проблема в том, что когда перетаскиваемые элементы генерируются из другого компонента, они не воспринимают родительский элемент сброса в качестве используемого контейнера сбрасываемого элемента. Вместо этого свойство контейнера для отбрасывания в объекте CDK Draggable имеет вид null.

Я попытался установить свойство cdkDragRootElement из директивы CdkDrag, чтобы проверить, могу ли я каким-либо образом ссылаться на родительский элемент, но вместо этого он заставляет элементы перемещать весь родительский элемент. Это не ожидаемое поведение.

Может быть, мне не хватает свойства CDK Draggable или в контейнере CDK Droppable для ссылки на родительский список сброса в моих элементах списка?

Вот "соответствующий" код в примере:

CDK-перетаскивания сортировочный-example.html 

<div cdkDropList class="example-list">
  <app-test></app-test>
</div>

тест / test.component.ts 

import { Component, OnInit } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  movies = [
    'Episode I - The Phantom Menace',
    'Episode II - Attack of the Clones',
    'Episode III - Revenge of the Sith',
    'Episode IV - A New Hope',
    'Episode V - The Empire Strikes Back',
    'Episode VI - Return of the Jedi',
    'Episode VII - The Force Awakens',
    'Episode VIII - The Last Jedi'
  ];

  constructor() { }

  ngOnInit() {
  }

  drop(event: CdkDragDrop<string[]>) {
    console.log(event);
    /*moveItemInArray(this.movies, event.previousIndex, event.currentIndex);*/
  }

}

тест / test.component.html 

<div class="example-box" *ngFor="let movie of movies" cdkDrag (cdkDragDropped)="drop($event)">
  {{movie}}
</div>

EDIT

Ожидаемый результат:

CDK-перетаскивания сортировочный-example.html 

<div cdkDropList class="example-list">
  <app-test></app-test>
</div>

тест / test.component.html 

<div class="example-box" *ngFor="..." cdkDrag cdkDropList=".example-list">
  {{movie}}
</div>

Пройдите через родителей, чтобы найти селектор и проверьте, есть ли у него директива / экземпляр cdkDropList, и присоедините его к cdkDrag.

Ответы [ 2 ]

0 голосов
/ 28 марта 2019

Проблема в том, что при добавлении на уровне компонентов DOM не может распознать cdkdropList. Есть два способа, которыми это может работать.
1) Если мы переместим cdkDragList внутри тестового компонента. Что является чем-то очевидным, и вам может быть не интересно.
2) вы можете использовать DragDrop Service для добавления списка перетаскивания в родительский. Эта функциональность использования перетаскивания в качестве службы была выпущена с Angular CDK 7.3.7.


Обратитесь к stackblitz https://stackblitz.com/edit/angular-ngtemplate-reorder-7i6uuk?file=src%2Fapp%2Fapp.component.ts для реализации dragdrop с использованием сервиса.

0 голосов
/ 30 октября 2018

свойство cdkDropList должно быть на app-test - это элемент DOM со списком ваших предметов

...