0

我正在创建一个显示卡片的网络应用程序。当我将一张卡片从一个地方拖到另一个地方时，我希望该卡片即使在页面刷新后也留在那个地方，我正在使用 bootstrap4 卡片如何在没有 Jquery 的情况下对卡片进行排序我如何实现这一点，我已经调查过了但没有可用。

html code

<div class="card vital-card col-md-3 vital-color" [ngClass]="{'vital-color': is_heartrateChart == true}"
            style="width: 20rem;" (cdkDropListDropped)="drop($event)" cdkDrag>
            <a class="card-tab" href="javascript:void(0)" (click)="changeTabsEvent(0)">
                <div class="card-body">
                    <div>
                        <span class="text-left"><b>HEART RATE</b></span>
                      
                          <span class= "text-right float-right"><i class="nc-icon nc-alert-circle-i" style="font-size: large;" 
                            [ngbTooltip]="tipContent" data-toggle="tooltip"
                        
                            placement="bottom"></i></span>
                       
                    </div>

                    <div class="icon-panel">
                        <span><img src="assets/img/fit/heart_lg.png" /></span>
                        <span class="icon-text">&nbsp;&nbsp;{{heartrateValue.vl}} bpm</span>
                    </div>
                </div>
                <div class="card-footer text-muted">
                    <div class="card-footer-text">
                        <p>{{heartrateValue.t}}</p>
                        <p>{{heartrateValue.d}}</p>
                    </div>
                </div>
            </a>
        </div>
 <div class="card vital-card col-md-3" [ngClass]="{'vital-color': is_bloodoxygenChart == true}"
            style="width: 20rem;" (cdkDropListDropped)="drop($event)" cdkDrag>
            <a class="card-tab" href="javascript:void(0)" (click)="changeTabsEvent(1)">
                <div class="card-body">
                    <div>
                        <span class="text-left"><b>SPO2</b></span>
                       
                        <span class= "text-right float-right"><i class="nc-icon nc-alert-circle-i" style="font-size: large;"
                            [ngbTooltip]="spo2tipContent" placement="bottom"></i></span>
                    </div>

                    <div class="icon-panel">
                        <span><img src="assets/img/fit/spo2_lg.png" /></span>
                        <span class="icon-text">&nbsp;&nbsp;{{bloodoxygenValue.vl}} %</span>
                    </div>
                </div>
                <div class="card-footer text-muted">
                    <div class="card-footer-text">
                        <p>{{bloodoxygenValue.t}}</p>
                        <p>{{bloodoxygenValue.d}}</p>
                    </div>
                </div>
            </a>
        </div>
ts file
 

    drop(event: CdkDragDrop<string[]>) {
        moveItemInArray(this.vitalCards, event.previousIndex, event.currentIndex);
        }
4

0 回答 0