AngularJS - Application de Glisser-Déposer

Introduction au Glisser-Déposer avec AngularJS

Salut à toi, futur(e) magicien(ne) d'AngularJS ! Aujourd'hui, nous allons entreprendre un voyage passionnant dans le monde des applications de glisser-déposer avec AngularJS. En tant que votre enseignant en informatique bienveillant, je suis ravi de vous guider à travers cette aventure, même si vous n'avez jamais écrit une seule ligne de code auparavant. Ne vous inquiétez pas - nous avancerons pas à pas, et avant que vous ne vous en rendiez compte, vous serez créer des applications web interactives comme un pro !

AngularJS - Drag Application

Qu'est-ce que le Glisser-Déposer ?

Avant de plonger dans le code, parlons de ce qu'est réellement le glisser-déposer. Imaginez que vous êtes en train d'organiser votre bureau. Vous cliquez sur un fichier, vous maintenez le bouton de la souris enfoncé, vous le déplacez vers un nouvel emplacement, et vous relâchez. C'est exactement ce qu'est le glisser-déposer en action ! C'est une manière de rendre les interfaces utilisateur plus intuitives et interactives.

Configuration deNotre Environnement AngularJS

Pour commencer avec notre application de glisser-déposer, nous devons d'abord configurer notre environnement AngularJS. Ne vous inquiétez pas si cela semble compliqué - c'est plus simple que de faire un sandwich au beurre de cacahuète !

Étape 1 : Inclure la Bibliothèque AngularJS

Tout d'abord, nous devons inclure la bibliothèque AngularJS dans notre fichier HTML. Nous pouvons le faire en ajoutant la ligne suivante dans la section <head> de notre HTML :

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

Cette ligne télécharge la bibliothèque AngularJS depuis les serveurs de Google. C'est comme commander une pizza - nous disons au navigateur d'aller chercher AngularJS pour nous !

Étape 2 : Créer Notre Application AngularJS

Ensuite, nous devons créer notre application AngularJS. Nous faisons cela en ajoutant une directive ng-app à notre HTML :

<body ng-app="dragApp">
<!-- Le contenu de notre application ira ici -->
</body>

Cela dit à AngularJS, "Hey, tout ce qui est à l'intérieur de cette balise <body> fait partie de notre application !"

Construction de Notre Application Glisser-Déposer

Maintenant que nous avons configuré notre environnement, commençons à construire notre application de glisser-déposer. Nous allons créer une liste simple où les éléments peuvent être glissés et réorganisés.

Étape 1 : Créer le Contrôleur

Tout d'abord, nous devons créer un contrôleur. Pensez au contrôleur comme au cerveau de notre application. C'est là que nous définissons le comportement de notre application.

angular.module('dragApp', [])
.controller('DragController', function($scope) {
$scope.items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];
});

Dans ce code, nous créons un module appelé 'dragApp' et un contrôleur appelé 'DragController'. Nous définissons également un tableau d'éléments que nous pourrons glisser et déposer.

Étape 2 : Configurer le HTML

Maintenant, mettons en place notre HTML pour afficher ces éléments :

<div ng-controller="DragController">
<ul>
<li ng-repeat="item in items" draggable="true">{{item}}</li>
</ul>
</div>

Ici, nous utilisons la directive ng-controller pour connecter notre HTML au contrôleur que nous venons de créer. La directive ng-repeat crée une liste d'éléments pour chaque élément dans notre tableau. L'attribut draggable="true" rend chaque élément glissable.

Étape 3 : Implémenter la Fonctionnalité Glisser-Déposer

Maintenant vient la partie amusante - implémenter la fonctionnalité de glisser-déposer ! Nous devons ajouter quelques gestionnaires d'événements à notre contrôleur :

angular.module('dragApp', [])
.controller('DragController', function($scope) {
$scope.items = ['Item 1', 'Item 2', 'Item 3', 'Item 4'];

$scope.dragStart = function(e, index) {
e.dataTransfer.setData('text/plain', index);
};

$scope.drop = function(e, index) {
e.preventDefault();
var data = e.dataTransfer.getData('text');
var fromIndex = parseInt(data);
var toIndex = index;
$scope.items.splice(toIndex, 0, $scope.items.splice(fromIndex, 1)[0]);
$scope.$apply();
};

$scope.allowDrop = function(e) {
e.preventDefault();
};
});

Décomposons cela :

dragStart : Cette fonction est appelée lorsque nous commençons à glisser un élément. Elle stocke l'index de l'élément que nous glissons.
drop : Cette fonction est appelée lorsque nous déposons un élément. Elle déplace l'élément de sa position initiale à sa nouvelle position dans le tableau.
allowDrop : Cette fonction permet de déposer des éléments en empêchant le comportement par défaut.

Étape 4 : Mettre à Jour le HTML

Enfin, mettons à jour notre HTML pour utiliser ces nouvelles fonctions :

<div ng-controller="DragController">
<ul>
<li ng-repeat="item in items" draggable="true"
ng-dragstart="dragStart($event, $index)"
ng-drop="drop($event, $index)"
ng-dragover="allowDrop($event)">
{{item}}
</li>
</ul>
</div>

Nous avons ajouté trois nouveaux attributs à nos éléments <li> :

ng-dragstart : Appelle notre fonction dragStart lorsque nous commençons à glisser un élément.
ng-drop : Appelle notre fonction drop lorsque nous déposons un élément.
ng-dragover : Appelle notre fonction allowDrop lorsque nous glissons sur un élément.

Conclusion

Et voilà, amis ! Nous avons créé une application de glisser-déposer simple avec AngularJS. Vous pouvez maintenant glisser les éléments dans la liste et les réorganiser. Pretty cool, non ?

Souvenez-vous, apprendre à coder c'est comme apprendre à faire du vélo. Ça peut sembler branlant au début, mais avec de la pratique, vous serez rapidement en train de rouler. Continuez à expérimenter, continuez à apprendre, et surtout, amusez-vous !

Voici un tableau récapitulatif des principales méthodes que nous avons utilisées dans notre application :

Méthode	Description
dragStart	Gère le début d'une opération de glisser
drop	Gère l'événement de dépôt, réorganisant les éléments
allowDrop	Permet le dépôt en empêchant le comportement par défaut

Bonne programmation, et que Angular soit avec vous !

Credits: Image by storyset

Tutoriel précédent:

AngularJS - Onglet de recherche

Tutoriel suivant:

AngularJS - Application Panier