práctica sortablejs

Use sortablejs para implementar arrastrar y soltar en el proyecto Angular.

Instalar dependencias y configuración

primer paso:npm install sortablejs --save

Error:

Segundo paso:npm install ngx-sortablejs --save

Error: No se puede resolver el árbol de dependencias, es decir, el conflicto de dependencias.

Paso 3: Ejecute npm install ngx-sortablejs --save --force
para decirle a npm que ignore el problema de que los módulos dependientes introducidos en el proyecto tienen las mismas dependencias pero diferentes versiones.

Paso 4: importa el módulo SortablejsModule

Paso 5: escriba un ejemplo simple para ver si puede funcionar normalmente.

<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;
    }
  }
}

Error al iniciar el proyecto:

ejecutar npm i --save-dev @types/sortablejs_

Vuelva a iniciar el proyecto y el inicio será exitoso.