将数据拖动到新的div时，拖放操作不起作用

Question

我正在使用Angular 2拖放将数据从列表拖动到另一个列表，该拖动工作正常，但是在将项目拖放到新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指定已存在数据的列表，并指定单个数据。