Drag mirror position is wrong and unable to drop at the top

[rajatkhare619]

REQUIRED: Before filing a usage question

Change each [ ] to [x] when you have done it.

• [ x] My issue title starts with Drag mirror position is wrong and unable to drop at the top
• [x ] I have read the README, especially the 'classic blunders' section
• [ x] I have looked at the demos to see if my use case has obvious examples.
• [ x] I have searched the ng2-dragula issues, including closed issues.
• [ x] I have browsed the issues labeled "future reference" for problems that have been solved before.

Use case description (required)

I'm trying to achieve the default behavior of drag and drop.

Can you show a demo, or a picture of what you want to achieve?

https://media.giphy.com/media/eNY1FmxclP4kD0uRtD/giphy.gif

Additional context I have template structure like below:

<div class="col-xs-12 no-padding" *ngIf="businessLayerArray.controls && businessLayerArray.controls.length > 0">
<label class="col-xs-offset-2 col-xs-3 text-center no-padding">{{'FRIENDLY_NAME' | translate}}</label>
<label class="col-xs-offset-1 col-xs-1 text-center no-padding">{{'ENABLE_MAP_INFORMATION' | translate}}</label>
<label class="col-xs-1 no-padding text-left col-xs-offset-1">{{'SEARCH_WIDTH' | translate}} &#40;{{'PX' |
  translate}}&#41;</label>
<label class="col-xs-1 no-padding text-left col-xs-offset-1">{{'MAX_CACHE_TIME' | translate}} &#40;{{'SEC' | translate}}&#41;</label>
</div>
<form class="form-groups" novalidate [formGroup]="mapProjectFormGroup">
<div [dragulaModel]='businessLayerArray.controls' [dragula]='"evented-bag"' id="businessmap-basic-sublayer" class="col-xs-12 no-padding" formArrayName="businessLayerArray">
  <div class="col-xs-12 well disableContainer wellpadding" *ngIf="businessLayerArray.controls && businessLayerArray.controls.length === 0">
    <h3>{{'ADD_BUSINESS_LAYERS' | translate}}</h3>
  </div>
  <ul class="tree" [formGroupName]="i" [ngSwitch]="item.controls.service?.value" *ngFor="let item of businessLayerArray.controls; let i=index">
    <ng-container *ngSwitchCase="'Spectrum-Spatial-Mapping'">
      <li>
        <div class="col-xs-12 no-padding border backgroundColor">
          <div class="col-xs-3 no-padding default-topbtm-padding container-flex wordBreak" title="{{item.controls.mapName.value}}">
            <div *ngIf="reorderingEnabled">
              <img id="dragHandle" class="lineHeight svgdragImg svg-brand" pbSvgFill src="./assets/images/resizer-icon.svg">
            </div>
            <i class="pbfont lg pbfont-map namedResourceIcon lg margin-r"></i>{{item.controls.mapName.value}}</div>
          <div class="col-xs-3 no-padding">
            <input id="friendlynameinput_{{i}}" formControlName='friendlyName' maxlength="256" class="form-control"
                   placeholder="Optional placeholder text" type="text" (change)="changeFriendlyName(item.controls)"
                   autocomplete="off" pbNoWhitespace required>
            <span class="text-error" *ngIf="item.controls.friendlyName?.errors?.duplicateValue">{{'DUPLICATE_FRIENDLY_NAME'
              | translate}} : {{item.controls.friendlyName.value}}</span>
            <span class="text-error" *ngIf="item.controls.friendlyName?.errors?.required || item.controls.friendlyName?.errors?.whiteSpace">{{'REQUIRED'
              | translate}}</span>
          </div>
          <div class="form-group col-xs-1 col-xs-offset-4 no-padding">

            <input type="number" class="form-control basic-properties-group-txt" formControlName='cacheAge' />
            <!-- <span class="input-group-addon" aria-label="Filter">
                {{ 'SEC' | translate }}
              </span> -->
            <span class="text-error" *ngIf="item.controls.cacheAge?.errors?.max">{{'MAX' | translate}} 86400</span>
            <span class="text-error" *ngIf="item.controls.cacheAge?.errors?.min">{{'MIN' | translate}} 0</span>

            <span class="text-error" *ngIf="item.controls.cacheAge?.errors?.required">{{'REQUIRED' | translate}}</span>
          </div>

          <div class="col-xs-1 pull-right default-topbtm-padding">
            <i class="nc-icon-outline ui-1_circle-remove sm mpCreateClose pull-right pointer" (click)="removeLayer(i)"></i>
          </div>
        </div>
        <ul formArrayName="layerList" *ngIf="item.controls.layerList">
          <li [formGroupName]="j" *ngFor="let sublayer of item.controls.layerList.controls; let j=index">
            <div class="col-xs-12 no-padding border">
              <div class="defaultPaddingSublayer col-xs-3 no-padding default-topbtm-padding container-flex wordBreak">
                <i class="pbfont lg pbfont-layer namedResourceIcon margin-r" title="{{sublayer.controls.name.value}}"></i>
                {{sublayer.controls.name.value}}
                <span *ngIf="sublayer.controls.isRaster?.value && !sublayer.controls.supportsGridCellValue?.value"
                      [attr.data-tooltip]="'MAP_PROJECT_LAYER_INFO_NOT_ALLOWED_RASTER' | translate"><i class="nc-icon-outline travel_info margin-l"></i></span>
              </div>
              <div formGroupName="basicProperties" [ngClass]="{disableContainer: (sublayer.controls.isRaster?.value && !sublayer.controls.supportsGridCellValue?.value)}">
                <div class="col-xs-1 col-xs-offset-3 no-padding text-center">
                  <label class="control checkbox wordBreak">
                    <input formControlName='enableMapInformation' type="checkbox" (change)="changeMapInfoOption(sublayer.controls)">
                    <span class="control-indicator"></span>
                  </label>
                </div>
                <div class="form-group col-xs-1 col-xs-offset-1 no-padding">
                  <input type="number" (keyup.enter)="searchWidthChange(sublayer.controls)" (blur)="searchWidthChange(sublayer.controls)"
                         class="form-control basic-properties-group-txt" formControlName='searchWidth' />
                  <!-- <span class="input-group-addon" aria-label="Filter">
                      {{ 'PX' | translate }}
                    </span> -->

                  <span class="text-error" *ngIf="sublayer.controls.searchWidth?.errors?.required">{{'REQUIRED' |
                    translate}}</span>
                </div>
              </div>

            </div>
          </li>
        </ul>
      </li>
    </ng-container>
    <ng-container *ngSwitchCase="'Spectrum-Spatial-Layer'">
      <li>
        <div class="col-xs-12 no-padding border backgroundColor">
          <div class="col-xs-3 no-padding default-topbtm-padding container-flex wordBreak" title="{{item.controls.resourceID.value | resourceName}}">
            <div *ngIf="reorderingEnabled">
              <img id="dragHandle" class="lineHeight svgdragImg svg-brand" pbSvgFill src="./assets/images/resizer-icon.svg">
            </div>
            <i class="pbfont lg pbfont-layer namedResourceIcon margin-r"></i>{{item.controls.resourceID.value |
            resourceName}}
            <span *ngIf="item.controls.isRaster?.value && !item.controls.supportsGridCellValue?.value"
                  [attr.data-tooltip]="'MAP_PROJECT_LAYER_INFO_NOT_ALLOWED_RASTER' | translate"><i class="nc-icon-outline travel_info margin-l"></i></span>
          </div>
          <div class="col-xs-3 no-padding">
            <input *ngIf="(item.controls.resourceID.value | resourceName) != item.controls.name.value" [ngClass]="{disableContainer: (item.controls.resourceID.value | resourceName)}"
                   id="friendlynameinput_{{i}}" [value]="item.controls.name.value" maxlength="256" class="form-control"
                   placeholder="Optional placeholder text" type="text">
          </div>
          <div formGroupName="basicProperties" [ngClass]="{disableContainer: (item.controls.isRaster?.value && !item.controls.supportsGridCellValue?.value)}">
            <div class="col-xs-1 no-padding text-center">
              <label class="control checkbox wordBreak">
                <input formControlName='enableMapInformation' type="checkbox" (change)="changeMapInfoOption(item.controls)">
                <span class="control-indicator"></span>
              </label>
            </div>
            <div class="form-group col-xs-1 col-xs-offset-1 no-padding">

              <input type="number" class="form-control basic-properties-group-txt" formControlName='searchWidth' />
              <!-- <span class="input-group-addon" aria-label="Filter">
                  {{ 'PX' | translate }}
                </span> -->
              <span class="text-error" *ngIf="item.controls.searchWidth?.errors?.required">{{'REQUIRED' |
                translate}}</span>

            </div>
          </div>
          <div class="col-xs-1 pull-right default-topbtm-padding">
            <i class="nc-icon-outline ui-1_circle-remove sm mpCreateClose pull-right pointer" (click)="removeLayer(i)"></i>
          </div>

        </div>
      </li>
    </ng-container>
    <ng-container *ngSwitchCase="'Spectrum-Spatial-Tile'">
      <li>
        <div class="col-xs-12 no-padding border backgroundColor">
          <div class="col-xs-3 no-padding default-topbtm-padding container-flex wordBreak" title="{{item.controls.mapName.value}}">
            <div *ngIf="reorderingEnabled">
              <img id="dragHandle" class="lineHeight svgdragImg svg-brand" pbSvgFill src="./assets/images/resizer-icon.svg">
            </div>
            <i class="pbfont lg pbfont-tile namedResourceIcon margin-r"></i>{{item.controls.mapName.value}}</div>
          <div class="col-xs-3 no-padding">
            <input id="friendlynameinput_{{i}}" formControlName='friendlyName' maxlength="256" class="form-control"
                   placeholder="Optional placeholder text" type="text" (change)="changeFriendlyName(item.controls)"
                   autocomplete="off" pbNoWhitespace required>
            <span class="text-error" *ngIf="item.controls.friendlyName?.errors?.duplicateValue">{{'DUPLICATE_FRIENDLY_NAME'
              | translate}} : {{item.controls.friendlyName.value}}</span>
            <span class="text-error" *ngIf="item.controls.friendlyName?.errors?.required || item.controls.friendlyName?.errors?.whiteSpace">{{'REQUIRED'
              | translate}}</span>
          </div>
          <div class="form-group col-xs-1 col-xs-offset-4 no-padding">

            <input type="number" class="form-control basic-properties-group-txt" formControlName='cacheAge' />
            <!-- <span class="input-group-addon" aria-label="Filter">
                {{ 'SEC' | translate }}
              </span> -->
            <span class="text-error" *ngIf="item.controls.cacheAge?.errors?.max">{{'MAX' | translate}} 86400</span>
            <span class="text-error" *ngIf="item.controls.cacheAge?.errors?.min">{{'MIN' | translate}} 0</span>
            <span class="text-error" *ngIf="item.controls.cacheAge?.errors?.required">{{'REQUIRED' | translate}}</span>

          </div>

          <div class="col-xs-1 pull-right default-topbtm-padding">
            <i class="nc-icon-outline ui-1_circle-remove sm mpCreateClose pull-right pointer" (click)="removeLayer(i)"></i>
          </div>
        </div>
        <ul formArrayName="layerList" *ngIf="item.controls.layerList">
          <li [formGroupName]="j" *ngFor="let sublayer of item.controls.layerList.controls; let j=index">
            <div class="col-xs-12 no-padding border">
              <div class="defaultPaddingSublayer col-xs-3 no-padding default-topbtm-padding container-flex wordBreak">
                <i class="pbfont lg pbfont-layer namedResourceIcon margin-r" title="{{sublayer.controls.name.value}}"></i>
                {{sublayer.controls.name.value}}
                <span *ngIf="sublayer.controls.isRaster?.value && !sublayer.controls.supportsGridCellValue?.value"
                      [attr.data-tooltip]="'MAP_PROJECT_LAYER_INFO_NOT_ALLOWED_RASTER' | translate"><i class="nc-icon-outline travel_info margin-l"></i></span>
              </div>
              <div formGroupName="basicProperties" [ngClass]="{disableContainer: (sublayer.controls.isRaster?.value && !sublayer.controls.supportsGridCellValue?.value)}">
                <div class="col-xs-1 col-xs-offset-3 no-padding text-center">
                  <label class="control checkbox wordBreak">
                    <input formControlName='enableMapInformation' type="checkbox" (change)="changeMapInfoOption(sublayer.controls)">
                    <span class="control-indicator"></span>
                  </label>
                </div>
                <div class="form-group col-xs-1 col-xs-offset-1 no-padding">

                  <input class="form-control basic-properties-group-txt" type="number" formControlName='searchWidth' />
                  <!-- <span class="input-group-addon" aria-label="Filter">
                      {{ 'PX' | translate }}
                    </span> -->
                  <span class="text-error" *ngIf="sublayer.controls.searchWidth?.errors?.required">{{'REQUIRED' |
                    translate}}</span>
                </div>
              </div>

            </div>
          </li>
        </ul>
      </li>
    </ng-container>
    <ng-container *ngSwitchCase="'Web-Mapping-Service'">
      <li>
        <div class="col-xs-12 no-padding border backgroundColor">
          <div class="col-xs-3 no-padding default-topbtm-padding container-flex wordBreak" title="{{item.controls.resourceID.value | resourceName}}">
            <i class="pbfont lg pbfont-map blueIcon margin-r"></i>{{item.controls.resourceID.value}}
          </div>
          <div class="col-xs-3 no-padding">
            <input id="friendlynameinput_{{i}}" formControlName='friendlyName' maxlength="256" class="form-control"
                   placeholder="Optional placeholder text" type="text" (change)="changeFriendlyName(item.controls)"
                   autocomplete="off" pbNoWhitespace required>
            <span class="text-error" *ngIf="item.controls.friendlyName?.errors?.duplicateValue">{{'DUPLICATE_FRIENDLY_NAME'
              | translate}} : {{item.controls.friendlyName.value}}</span>
            <span class="text-error" *ngIf="item.controls.friendlyName?.errors?.required || item.controls.friendlyName?.errors?.whiteSpace">{{'REQUIRED'
              | translate}}</span>
          </div>
          <div class="col-xs-1 pull-right default-topbtm-padding">
            <i class="nc-icon-outline ui-1_circle-remove sm mpCreateClose pull-right pointer" (click)="removeLayer(i)"></i>
          </div>
        </div>
      </li>
    </ng-container>
    <ng-container *ngSwitchCase="'Tile-Service'">
      <li>
        <div class="col-xs-12 no-padding border backgroundColor">
          <div class="col-xs-3 no-padding default-topbtm-padding container-flex wordBreak" title="{{item.controls.resourceID.value | resourceName}}">
            <div *ngIf="reorderingEnabled">
              <img id="dragHandle" class="lineHeight svgdragImg svg-brand" pbSvgFill src="./assets/images/resizer-icon.svg">
            </div>
            <i class="pbfont lg pbfont-tile blueIcon margin-r"></i>{{item.controls.resourceID.value}}
          </div>
          <div class="col-xs-3 no-padding">
            <input id="friendlynameinput_{{i}}" formControlName='friendlyName' maxlength="256" class="form-control"
                   placeholder="Optional placeholder text" type="text" (change)="changeFriendlyName(item.controls)"
                   autocomplete="off" pbNoWhitespace required>
            <span class="text-error" *ngIf="item.controls.friendlyName?.errors?.duplicateValue">{{'DUPLICATE_FRIENDLY_NAME'
              | translate}} : {{item.controls.friendlyName.value}}</span>
            <span class="text-error" *ngIf="item.controls.friendlyName?.errors?.required || item.controls.friendlyName?.errors?.whiteSpace">{{'REQUIRED'
              | translate}}</span>
          </div>
          <div class="col-xs-1 pull-right default-topbtm-padding">
            <i class="nc-icon-outline ui-1_circle-remove sm mpCreateClose pull-right pointer" (click)="removeLayer(i)"></i>
          </div>
        </div>
      </li>
    </ng-container>
    <ng-container *ngIf="item.controls.type?.value === 'Analyst-Thematic' || item.controls.type?.value === 'Analyst-Query'">
      <li>
        <div class="col-xs-12 no-padding border backgroundColor">
          <div class="col-xs-11 no-padding default-topbtm-padding container-flex wordBreak" title="{{item.controls.name.value}}">
            <div *ngIf="reorderingEnabled">
              <img id="dragHandle" class="lineHeight svgdragImg svg-brand" pbSvgFill src="./assets/images/resizer-icon.svg">
            </div>
            <i class="pbfont lg pbfont-tile blueIcon margin-r"></i>{{item.controls.name.value}}
          </div>
          <div class="col-xs-1 pull-right default-topbtm-padding">
            <i class="nc-icon-outline ui-1_circle-remove sm mpCreateClose pull-right pointer" (click)="removeLayer(i)"></i>
          </div>
        </div>
      </li>
    </ng-container>
  </ul>
</div>
</form>

Here 'businessLayerArray' is a formArray

I'm using the default settings and have dragula stlyes in place.

As you can see, the mirror's position is not correct and I'm unable to drag any element to the top. Also, I need to drag the items to the top of other items to make them drop-able. In the demo I had to drag them to the middle of other items.

I'm thinking it could be because some elements in the HTML are not meant to be draggable but don't know which. There is no 'h2' element.

What could be the issue here? Any help is appreciated.