Перетаскивание с использованием определенного элемента перетаскиваемого контейнера - PullRequest
Новая
       26

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

0 голосов
/ 27 января 2020

В моем приложении angular есть функция перетаскивания. Для этого я использовал перетаскивание JavaScript. Код как ниже.

HTML: 

<div *ngFor="let KPI of dashboardKPIs" data-id="{{KPI.id}}" draggable="true" (dragenter)="handleDragEnter($event)" (dragend)="handleDrop($event)">
    <div>
        <div>This is draggable item</div>
        <div class="darg-here">Drag only with this</div>
    </div>
</div>

TS: 

handleDrop(event) {
    let data = event.currentTarget.id;
    let indexOfDragged = this.dashboardKPIs.findIndex((item) => item.id == data);
    let indexOfPlacement = this.dashboardKPIs.findIndex((item) => item.id == this.droppableAreaId);
    let draggedElem = this.dashboardKPIs.find((item) => item.id == data)

    this.dashboardKPIs.splice(indexOfDragged, 1);
    this.dashboardKPIs.splice(indexOfPlacement, 0, draggedElem);
    this.droppableAreaId = null;
}

handleDragEnter(event) {
    let droppableArea = event.currentTarget.id;
    this.droppableAreaId = droppableArea;
}

Здесь все работает нормально. Но я хочу, чтобы событие перетаскивания происходило только при перетаскивании с использованием определенного элемента в перетаскиваемом контейнере. Здесь это элемент класса darg-here. Но при перетаскивании весь перетаскиваемый элемент следует перетаскивать.

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

Спасибо ...

...