web-dev-qa-db-fra.com

Angular ng-sortable - Exemple basique de fonctionnement

SITUATION:

Bonjour les gars! Dans mon application, j'ai une sorte de kanban: il y a quelques colonnes, chacune contenant une liste d'éléments.

Je dois faire glisser des éléments parmi les colonnes et les réorganiser dans la même colonne.

J'ai déjà essayé trois modules angulaires liés au glisser-déposer (les deux premiers) et au réordonnancement (le troisième):

ngDraggable : https://github.com/fatlinesofcode/ngDraggable

Angular dragdrop : https://github.com/codef0rmer/angular-dragdrop

Angular ui-sortable : https://github.com/angular-ui/ui-sortable

Ils sont gentils, avec une bonne documentation, mais il ne semble pas possible de glisser-déposer et de réorganiser en même temps. Puis j'ai trouvé un autre module:

ng-sortable : https://github.com/a5hik/ng-sortable

Cela semble être exactement ce dont j'ai besoin. Mais la documentation n'est pas si claire. Je ne suis pas capable de comprendre comment le configurer.


QUESTION:

Pouvez-vous me montrer s'il vous plaît comment le configurer? Il y a un plunker avec un bon exemple clair?

Je vous remercie!

javascriptangularjsdrag-and-dropdraggabledroppable
9
FrancescoMussi

Configuration minimale triable (pas besoin de bower. Bower est une confusion pour les demi-produits comme moi, aussi.).

C'est la configuration minimale pour obtenir un tableau triable complet avec ng-sortable, qui a fonctionné pour moi.

Charge les Javascripts nécessaires

  1. Charger angular.js

  2. Charger ng-sortable.js _ (Trouver ceci dans le dossier dist du fichier téléchargé .Zip fichier https://github.com/a5hik/ng-sortable )

  3. Chargez votre app.js

  4. Chargez le as.sortable dans votre application var app = angular.module('app', ['ngRoute', 'as.sortable']);

  5. Chargez votre AppController.js

Charge les feuilles de style nécessaires

(Trouvez les deux dans le dossier dist du fichier téléchargé .Zip file https://github.com/a5hik/ng-sortable )

  1. Charger ng-sortable.css

  2. Charger ng-sortable.style.css

  3. Créer ul avec les attributs nécessaires (data-as-sortable data-ng-model="sortableList")

  4. Ajouter data-as-sortable-item à li

  5. Insérer div avec data-as-sortable-item-handle dans li 

<!DOCTYPE html>
<html>
    <head>
        <title>NG-Sortable</title>
        <script type="text/javascript" src="js/angular/angular.js"></script>
        <script type="text/javascript" src="js/sortable/ng-sortable.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
        <script type="text/javascript" src="js/AppController.js"></script>

        <link rel="stylesheet" type="text/css" href="css/ng-sortable.css">
        <link rel="stylesheet" type="text/css" href="css/ng-sortable.style.css">
    </head>
    <body ng-app="app" ng-controller="AppController">
        <ul data-as-sortable data-ng-model="sortableList">
            <li ng-repeat="item in sortableList" data-as-sortable-item>
                <div data-as-sortable-item-handle>
                    index: {{$index}} | id: {{item.id}} | title: {{item.title}}
                </div>
            </li>
        </ul>
    </body>
</html>

// app.js (Your file)
var app = angular.module('app', ['ngRoute', 'as.sortable']);
// AppController.js (Your file)
app.controller('AppController', [
    '$scope',
    function ( $scope) {


        $scope.sortableList = [
            {
                id : "id-000",
                title : "item 000"
            },
            {
                id : "id-001",
                title : "item 001"
            },
            {
                id : "id-002",
                title : "item 002"
            }

        ];

    }
]);
13
Herr_Hansen

Cela nous aiderait si nous savions ce que vous entendez par "configurer" (que vous vouliez réellement l'ajouter au projet ou comment l'utiliser). Cela aiderait également si nous savions quelle pile, le cas échéant, vous installiez ceci sur.

À installer
Les instructions d’installation se trouvent dans la section "Utilisation" de la page Git.

  1. Exécutez bower install ng-sortable ou bower install ng-sortable -save si vous utilisez yeoman
  2. Ajoutez les chemins d'accès à ng-sortable.min.js, ng-sortable.min.css et ng-sortable.style.min.css à votre projet. L'ajout de ceux-ci dépend de la pile que vous utilisez.
  3. Ajoutez ui.sortable en tant que dépendance de votre application ou de votre module. Encore une fois, son utilisation dépend de votre pile.

Utiliser 

<ul data-as-sortable data-ng-model="array">
    <li ng-repeat="item in array" data-as-sortable-item>
        <div data-as-sortable-item-handle>
             {{item.data}}
        </div>
    </li>
</ul>

Où "tableau" est le tableau d'éléments que vous triez. Cela fonctionnera immédiatement, mais si vous avez besoin d'une logique personnalisée, remplacez data-as-sortable par data-as-sortable="CustomLogic" Où "CustomLogic" est une méthode de votre contrôleur qui remplace le comportement par défaut. Pour plus de détails sur la façon d’ajouter une logique personnalisée, consultez leur page Git dans les sections "Rappels" et "Utilisation".

7
Tim Aagaard

Je viens de télécharger un exemple simple de cette bibliothèque géniale. J'ai deux divs côte à côte, vous pouvez les déplacer de l'un à l'autre. J'utilise des données statiques. Vérifie s'il te plaît. https://github.com/moytho/DragAndDropAngularJS/tree/master/DragAndDrop ou comme vous l'avez demandé, vous pouvez le vérifier ici https://plnkr.co/SRN4u7

<body ng-controller="dragDropController">
<h1>Example</h1>

<div class="container">

<div id="row" class="row">

    <div id="assignedEmployees" class="col-lg-5" style="border: 5px solid red;">
        <div class="card" as-sortable="sortableOptions" data-ng-model="data.projects">
            <div ng-repeat="project in data.projects" as-sortable-item>
                <a title="Add card to column" ng-click="setDate(project)">
                    <i class="glyphicon glyphicon-plus"></i>
                </a>
                <div as-sortable-item-handle>{{project.FirstName}}</div>
            </div>
        </div>
    </div>

    <div id="freeEmployees" class="col-lg-5" style="background-color:lightgray;border:5px dashed gray;">
        <div class="card" as-sortable="sortableOptions" data-ng-model="data.employees">
            <div ng-repeat="employee in data.employees" as-sortable-item>
                <div as-sortable-item-handle>{{employee.FirstName}}</div>
            </div>
        </div>
    </div>

</div>     

</div>
0
Erick Moises Racancoj Amperez