<div class="content__title">
|
<h1>
|
Sortable 拖放
|
<small>use <a href="//github.com/akserg/ng2-dnd" target="_blank">ng2-dnd</a> library.</small>
|
</h1>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="8">
|
<nz-card nzTitle="韦小宝老婆排名">
|
<ul class="list-group" dnd-sortable-container [sortableData]="hiBaby">
|
<li *ngFor="let item of hiBaby; let i = index"
|
class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
|
</ul>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="8">
|
<nz-card nzTitle="新排名">
|
<ol>
|
<li *ngFor="let item of hiBaby; let i = index">{{i + 1}}: {{item}}</li>
|
</ol>
|
</nz-card>
|
</div>
|
</div>
|
<div nz-row [nzGutter]="16">
|
<div nz-col [nzMd]="8">
|
<nz-card nzTitle="翻牌" [nzBordered]="false" nzNoPadding class="ant-card__pink">
|
<div class="p-md" dnd-sortable-container [dropZones]="['zone']" [sortableData]="hiBabyLove">
|
<ul class="list-group">
|
<li *ngFor="let item of hiBabyLove; let i = index"
|
class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
|
</ul>
|
</div>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="8">
|
<nz-card nzTitle="前半夜" [nzBordered]="false" nzNoPadding class="ant-card__green">
|
<div class="p-md" dnd-sortable-container [dropZones]="['zone']" [sortableData]="frontMidnight">
|
<ul class="list-group">
|
<li *ngFor="let item of frontMidnight; let i = index"
|
class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
|
</ul>
|
</div>
|
</nz-card>
|
</div>
|
<div nz-col [nzMd]="8">
|
<nz-card nzTitle="后半夜" [nzBordered]="false" nzNoPadding class="ant-card__warning">
|
<div class="p-md" dnd-sortable-container [dropZones]="['zone']" [sortableData]="afterMidnight">
|
<ul class="list-group">
|
<li *ngFor="let item of afterMidnight; let i = index"
|
class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>
|
</ul>
|
</div>
|
</nz-card>
|
</div>
|
</div>
|
