Comment implémenter le glisser-déposer en utilisant angular 2 (v2.0.0-beta.15)
Je souhaite implémenter une simple liste déroulante glisser-déposer dans Angular, par exemple une liste d'épicerie que je peux modifier dans son ordre.
Iv l'a mis en place avant d'utiliser https://github.com/akserg/ng2-dnd mais mon problème est que j'utilise angular 2.0.0-beta.15 et que je ne peux pas le mettre à jour actuellement, je dois donc trouver quelque chose qui supporte cette version. Iv a essayé de rechercher des références spécifiques de cette bibliothèque et rien qui ne me corresponde. J'ai besoin de ce comportement exact. L'exemple plus spécifique de cette bibliothèque est . Peut-être que quelqu'un sait d'une manière ou d'une autre que je peux le faire moi-même, de toute façon ça va être bien, préférer une bibliothèque pour gagner du temps.
(im utilisant TypeScript)
si quelqu'un a une autre solution d'une autre manière pour réorganiser une liste et peut donner un exemple qui sera également béni.
Ok, tout d’abord merci aux personnes qui ont répondu.
La réponse qui m'a le plus aidé était comment résoudre le problème que j'avais avec ng2-dnd:
Je viens d'ajouter aux devDependencies:
"ng2-dnd" : "1.5.0"
lancez npm install et j’étais prêt à utiliser la bibliothèque comme dans les exemples de github.
Il existe deux manières les plus courantes d'autoriser le glisser-déposer à l'aide de Angular 2. La première consiste à utiliser l'une des bibliothèques open source basées sur Angular (il en existe plusieurs); et deuxièmement, utiliser la bibliothèque jQuery UI pour le glisser-déposer. Après quelques recherches, j'ai constaté que la plupart d'entre elles sont conçues pour Angular 1.x et ne prennent toujours pas en charge toutes les fonctionnalités dont j'avais besoin.
J'ai donc décidé de faire mon implémentation du glisser-déposer en utilisant jQuery en utilisant ses bibliothèques TypeScript.
Pour prendre en charge le glisser-déposer, commencez par récupérer des fichiers JavaScript jQuery dans mon projet et dans le fichier index.html. Après avoir récupéré les fichiers jQuery avant de les utiliser dans Angular + projet TypeScript, il nécessite jquery.d.ts et jqueryui.d.ts, ce qui donnera une implémentation spécifique au type pour le glisser-déposer.
Étape 1
Exécutez les commandes suivantes sur le répertoire racine du projet:
// install tsd
npm install tsd -g
// install jquery.d.ts
tsd install jquery --save
// install jqueryui.d.ts
tds install jqueryui --save
Les commandes ci-dessus installeront le mappage spécifique à jQuery dans le dossier de saisie du projet, comme indiqué ici.
Étape 2
Le glisser-déposer a deux aspects à implémenter:
- un conteneur qui permet de déposer le composant dans droppable container
- composant qui sera autorisé à faire glisser composant glissable
Dans mon implémentation, board board est largable, où des morceaux peuvent être déposés et des morceaux déplaçables pouvant être glissés entre deux carrés. Afin de supporter cela, make square existant (modèle html) ajoute la classe CSS droppable-square, qui sera utilisée plus tard pour rendre square droppable. Et ajoutez la classe CSS draggable-piece pour rendre la pièce d'échecs déplaçable.
<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>
Étape 3
Pour la mise en œuvre de draggable et droppable, créé une nouvelle classe nommée PieceMover qui a la logique de rendre les pièces mobiles. Comme indiqué dans la base de code ci-dessous, les classes CSS ci-dessus sont déplaçables et peuvent être réduites, et des restrictions sont imposées uniquement en permettant aux éléments d'être déposés sur un carré et non à l'extérieur. Il y a peu de logique supplémentaire à afficher lors du processus de glisser-déposer sur les éléments survolés.
Injection de dépendance - Angular 2
Dependency Injection est l’une des fonctionnalités les plus précieuses de Angular 2. Comme tous les langages de développement côté serveur riches tels que C #, Java permet d’utiliser le conteneur IoC pour prendre en charge l’Injection de dépendance, de même Angular 2 DI. L'injection de dépendance permet de découpler les dépendances entre les classes et de prendre en charge le développement modulaire. Comme visible dans PieceMover, le code de classe situé au-dessus de la classe est décoré de @Injectable(), ce qui indique au conteneur DI de Angular 2 que cette classe peut être injectée. Notez également l’importation Injectable dans la première ligne du code de classe PieceMover.
La classe de consommateur qui est BoardComponent dans ce cas utilise un tableau "providers" pour des dépendances spécifiques devant être résolues par le conteneur Angular 2 DI. Le constructeur prend un paramètre de type PieceMover qui sera injecté/résolu par DI. Après avoir résolu les dépendances comme mentionné ci-dessus, après avoir affiché le tableau BoardComponent appelle la méthode MakePiecesMovable(), qui permet de déplacer les pièces sur des carrés d'échecs.
UPD: Si vous ne faites pas de compromis avec l'implémentation personnalisée, vous pouvez utiliser certaines bibliothèques de cette liste:
Vous pouvez utiliser une révision spécifique du référentiel Dragula 2 Github.
1 - Ouvrez package.json et faites défiler jusqu'à "dependencies"
2 - Editez le paquet ng2-dragula sur le lien Github avec le dernier commit avant de passer à RC.1
"ng2-dragula": "git://github.com/valor-software/ng2-dragula.git#0cdcd52b1a486609ed4b4a43465b1dac2bb1b007"
3 - Supprimez le dossier ng2-dragula dans node_modules et réinstallez-le à partir de votre package.json avec
npm install