sortable not working when i did recursive drag drop

[Lifestyle]

This is example

<div dnd-droppable class="panel panel-info" (onDropSuccess)="transferDataSuccess($event)">
    <div class="panel-heading"></div>
    <div class="panel-body">
        <div [hidden]="!(receivedData.length > 0)">
            <div class="list-group" dnd-sortable-container [sortableData]="receivedData">
                <div *ngFor="let cmp of receivedData; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i" [innerHTML]="cmp  | safeHtml">
                </div>
                <!-- in layout -->
                <div dnd-droppable (onDropSuccess)="transferDataSuccess($event)">
                    <div [hidden]="!(receivedData1.length > 0)">
                        <div class="list-group" dnd-sortable-container [sortableData]="receivedData1" [dropZones]="['boxers-zone']">
                            <div *ngFor="let cmp of receivedData1; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i" [innerHTML]="cmp | safeHtml">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

how to fixed ?
thank you and sorry i easy english