Блог

Главная - Вопросы по программированию - Применение перетаскивания между списком и таблицей

Применение перетаскивания между списком и таблицей

#angular #drag-and-drop #primeng #angular9

#angular #перетаскивание #применение #angular9

Вопрос:

Я пытаюсь перенести элементы из списка в таблицу и наоборот, используя функцию перетаскивания primeng, оба элемента должны выступать в качестве источника перетаскивания и назначения перетаскивания.

использование PrimeNG-9.0.0 и Angular 9.0.2

введите описание изображения здесь

я внес изменения, как показано ниже, из примера документации primeng..

  <div class="ui-g">
                    <div class="ui-g-12 ui-md-6 ui-g-nopad drag-column">
                        <ul style="margin:0;padding:0">
                            <li *ngFor="let car of availableCars" class="ui-helper-clearfix" pDraggable="cars"  pDroppable="Rcars"
                                (onDragStart)="dragStart($event,car)"   (onDrop)="drop($event)" (onDragEnd)="dragEnd($event)">
                                <div style="margin:8px 0 0 8px;float:left">{{car.vin}} - {{car.year}}</div>
                            </li>
                        </ul>
                    </div>

                <div class="ui-g-12 ui-md-6 drop-column" pDroppable="cars"  pDraggable="Rars"
                [ngClass]="{'ui-highlight-car':draggedCar}">
                <p-table [value]="selectedCars">
                    <ng-template pTemplate="header">
                        <tr>
                            <th>Vin</th>
                            <th>Year</th>
                            <th>Brand</th>
                            <th>Color</th>
                        </tr>
                    </ng-template>
                    <ng-template pTemplate="body" let-car>
                        <tr   (onDragStart)="dragStart($event,car)"  (onDrop)="drop($event)"
                        (onDragEnd)="dragEnd($event)">
                            <td>{{car.vin}}</td>
                            <td>{{car.year}}</td>
                            <td>{{car.brand}}</td>
                            <td>{{car.color}}</td>
                        </tr>
                    </ng-template>
                </p-table>
            </div>

Пожалуйста, помогите, если кто-нибудь работал с такой же функцией

Ответ №1:

Я не использую PrimeNG, но angular material предоставляет модуль перетаскивания

перейдите в раздел перетаскивание поиск заголовка Перенос элементов между списками

Я думаю, это поможет вам

Комментарии:

1. Этот вопрос был специфичен для PrimeNG.