sortablejs の練習

Angular プロジェクトでドラッグ アンド ドロップを実装するには、sortablejs を使用します。

依存関係と構成をインストールする

最初の一歩：npm install sortablejs --save

エラー：

ステップ2：npm install ngx-sortablejs --save

エラー: 依存関係ツリーを解決できません。つまり、依存関係の競合です。

ステップ 3: プロジェクトで導入された依存モジュールが同じ依存関係を持っているがバージョンが異なるという問題を無視するように npmnpm install ngx-sortablejs --save --force
に指示するために。

ステップ 4: SortablejsModule モジュールをインポートする

ステップ 5: 簡単な例を書いて、正常に実行できるかどうかを確認します。

<div class="container" [sortablejs]="items">
  <div *ngFor="let i of data" class="item">item {
   
   { i }}</div>
</div>

import {
    
     Component, OnInit } from '@angular/core';

@Component({
    
    
  selector: 'learn-sortable',
  templateUrl: './sortablejs.component.html',
  styleUrls: ['./sortablejs.scss'],
})
export class SortableComponent implements OnInit {
    
    
  public data = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

  ngOnInit(): void {
    
    }
}

.container {
    
    
  margin-left: 300px;
  margin-top: 100px;
  width: 600px;
  border: 1px solid black;
  overflow: auto;
  .item {
    
    
    height: 50px;
    line-height: 50px;
    width: 100%;
    border-bottom: 1px solid gray;
    &:last-child {
    
    
      border-bottom: none;
    }
  }
}

プロジェクト開始時のエラー:

実行しますnpm i --save-dev @types/sortablejs。

プロジェクトを再起動すると、起動に成功します。