Búsqueda de sitios web

html - Cómo implementar arrastrar y soltar usando Angular 2 (v2.0.0-beta.15)

Quiero implementar una lista simple de arrastrar y soltar en Angular, por ejemplo, una lista de compras que pueda cambiar de orden.

Lo he implementado antes usando https://github.com/akserg/ng2-dnd, pero mi problema es que uso Angular 2.0.0-beta.15 y actualmente no puedo actualizarlo, así que tengo que encontrar algo que soporte esta versión. He intentado buscar commits específicos de esta biblioteca y nada encaja con mi versión. Necesito ese comportamiento exacto. El ejemplo más específico de esta biblioteca es . Tal vez alguien sepa de algún modo que incluso pueda hacerlo yo mismo, de todos modos estaría bien, prefiero alguna biblioteca para ahorrar tiempo.

(estoy usando TypeScript)

si hay alguien que tenga alguna otra solución de otra manera para reordenar una lista y pueda dar un ejemplo, eso también será bienvenido.

Respuesta #1

Hay dos formas más comunes de permitir arrastrar y soltar usando Angular 2. La primera es usando una de las bibliotecas de código abierto basadas en Angular (hay varias); y la segunda es usando la biblioteca jQuery UI para arrastrar y soltar. Después de algunas investigaciones, encontré que la mayoría de ellas están hechas para Angular 1.x y aún no soportan todas las funciones que necesitaba.

Así que he decidido hacer mi implementación de arrastrar y soltar usando jQuery, utilizando sus bibliotecas de TypeScript.

Para soportar arrastrar y soltar, comienza por obtener los archivos de JavaScript de jQuery en mi proyecto y en el archivo index.html. Después de obtener los archivos de jQuery, antes de usarlos en un proyecto de Angular + TypeScript, se requieren jquery.d.ts y jqueryui.d.ts, los cuales proporcionarán una implementación específica de tipo para arrastrar y soltar.

Paso 1

Ejecute los siguientes comandos en el directorio raíz del proyecto:

// install tsd
npm install tsd -g
// install jquery.d.ts
tsd install jquery --save
// install jqueryui.d.ts
tds install jqueryui --save

Los comandos anteriores instalarán la asignación específica de tipo para jQuery en la carpeta de tipado del proyecto como se muestra aquí.

Paso 2

Arrastrar y soltar tiene dos aspectos para su implementación:

  • algún contenedor que permita que el componente se suelte dentro de contenedor droppable
  • componente que tendrá permitido arrastrar componente arrastrable

En mi implementación, el cuadro del tablero es soltadero donde se pueden soltar las piezas y las piezas son arrastrables y pueden ser arrastradas entre dos cuadros. Para soportar esto, haga que el cuadro existente (plantilla HTML) agregue la clase CSS droppable-square, que se usará más adelante para hacer que el cuadro sea soltadero. Y agregue la clase CSS draggable-piece para hacer que la pieza de ajedrez sea arrastrable.

<div *ngFor="let files of Board.Files, let i = index">
  <div class="board-square droppable-square" *ngFor="let rank of Board.Ranks, let j = index" [style.background]="Board.Squares[7-i][j].IsWhite ? '#FECE9E': 'D18B46'">
    <span class="square-name">{{Board.Squares[7-i][j].SquareId}}</span>
    <div *ngIf="Board.Squares[7-i][j].Piece" class="piece draggable-piece"></div>
  </div>
</div>

Paso 3

Para la implementación de arrastrable y soltado, se creó una nueva clase llamada PieceMover que tiene la lógica para hacer que las piezas sean movibles. Como se muestra en la siguiente base de código, hace que las clases CSS anteriores sean arrastrables y soltables, y establece restricciones que solo permiten que la pieza se suelte en un cuadrado y no fuera de él. Hay una lógica adicional para mostrar el borde durante el proceso de arrastrar y soltar sobre el cual las piezas pasan el cursor.

Inyección de Dependencias - Angular 2

La Inyección de Dependencias es una de las características más valiosas de Angular 2. Al igual que cualquier lenguaje de desarrollo de servidor rico como C# o Java permite tener un contenedor IoC para soportar la Inyección de Dependencias, de manera similar Angular 2 permite la DI. La Inyección de Dependencias permite desacoplar las dependencias entre clases y soporta el desarrollo modular. Como se puede ver en el código de la clase PieceMover arriba, la clase está decorada con @Injectable(), lo que indica al contenedor DI de Angular 2 que esta clase podría ser inyectada. También se debe notar la importación de Injectable en la primera línea del código de la clase PieceMover.

La clase consumidora, que en este caso es BoardComponent, utiliza el arreglo de "providers" para especificar las dependencias que deben ser resueltas por el contenedor de DI de Angular 2. El constructor toma un parámetro de tipo PieceMover, que será inyectado/resuelto por DI. Después de resolver las dependencias como se mencionó anteriormente, y tras mostrar el tablero, BoardComponent llama al método MakePiecesMovable(), que hace que las piezas se muevan sobre las casillas del ajedrez.

ACTUALIZACIÓN: Si no haces un acuerdo con una implementación personalizada, puedes usar algunas bibliotecas de esta lista:

  • ng2-draggable
  • ng2-dragula

Respuesta #2

Puedes usar una revisión específica del repositorio de Github de Dragula 2.

1 - Abre package.json y desplázate hasta "dependencies"

2 - Edita el paquete ng2-dragula al enlace de Github con el último commit antes de que cambiaran a RC.1

"ng2-dragula": "git://github.com/valor-software/ng2-dragula.git#0cdcd52b1a486609ed4b4a43465b1dac2bb1b007"

3 - Elimina la carpeta ng2-dragula en node_modules y reinstálala desde tu package.json con

npm install

Artículos relacionados