SortableJS将项目放入空列表

Question

我在应用程序中使用SortableJS，我需要将元素放在列表中，但要放在特定的位置。列表中填充了'ghost'元素，它对排序有反应，但项目始终位于第一位。目标是将工具拖到幻影元素上，并将其放置在任何位置。

可用工具<-幽灵元素

<div class="steps-list" [sortablejs]="workflow.steps" [sortablejsOptions]="workflowStepsOptions">
    <ng-container *ngFor="let step of workflow.steps">
        <div class="step-card-container">
            <collab-app-step-card [step]="step" #stpView (stepDeleteEvent)="deleteStep($event)"></collab-app-step-card>
        </div>
    </ng-container>

    <ng-container *ngFor="let emptyColumn of availableTools">
        <div class="step-card-container">
            <div class="step-ghost">
                <div class="step-ghost-head">Add new column</div>
                <div class="step-ghost-text">Select the tool below, which you need for the first step, made some settings, if needed. </div>
            </div>
        </div>
    </ng-container>
</div>

<div class="tools-head">
    Available task tools
</div>
<div class="tools-list" [sortablejs]="availableTools" [sortablejsOptions]="workflowToolsOptions" [sortablejsCloneFunction]="toolToStepConverter">
    <ng-container *ngFor="let tool of availableTools">
        <collab-app-tool-card [tool]="tool" class="tool-card-container" (stepAddEvent)="addStep($event)"></collab-app-tool-card>
    </ng-container>
</div>