Drag-and-Drop Drop не работает при перетаскивании данных в новый div - PullRequest
Новая
       29

Drag-and-Drop Drop не работает при перетаскивании данных в новый div

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

Я использую Angular 2 Drag-and-Drop для перетаскивания данных из списка в другой, перетаскивание работает нормально, но при перетаскивании элемента в новый div он автоматически опускается вниз, мое требование - перетаскивать его в любую область насписок. 

  <div class="col">
    <div class="clearfix">
      <div class="dropbody-margin">
        <div
          dnd-droppable
          (onDropSuccess)="addTo($event, pageResponse, templateResponse)"
          [dropZones]="['source-dropZone']"
        >
          <ul
            dnd-sortable-container
            class="list-group"
            [sortableData]="listTarget"
            [ngClass]="{ 'drop-body': listTarget.length < 1 }"
          >
            <li
              *ngFor="let target of listTarget; let j = index"
              class="list-group-item railMargin"
              id="drag-list"
              dnd-sortable
              dnd-draggable [dragEnabled]="true"
              [sortableIndex]="j"
              [dragData]="target"
              aria-hidden="true"
              (click)="getEachRailDetails(target)"
              [ngClass]="{
                active: selectedRail && selectedRail.id == target.id
              }"
            >
              {{ target.name }}
              <img src="{{ target.snapShot.image }}" />
              <div class="railIcon">
                <span
                  class="fa fa-cog"
                  *ngIf="target.metadata && target.metadata.length"
                  (click)="setRailConfig(target.metadata)"
                ></span>
                <span
                  class="fa fa-files-o"
                  (click)="duplicateRail(target.id)"
                ></span>
                <span
                  class="fa fa-trash"
                  (click)="removeRail(j, 'rail')"
                ></span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>

ul определяет список уже существующих данных и отдельных данных.

...