Angulaire ng-triables - exemple de Base de la façon dont il fonctionne

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.

J'ai besoin pour faire glisser et déposer des éléments entre les colonnes et les réorganiser à l'intérieur de la même colonne.

J'ai essayé avant trois angulaire des modules liés avec le glisser-déposer (les deux premières) et de la réorganisation (troisième):

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

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

Angulaire de l'interface utilisateur-triables: https://github.com/angular-ui/ui-sortable

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

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

Il semble être exactement ce dont j'ai besoin.
Mais la documentation n'est pas si clair. Je ne suis pas en mesure de comprendre comment le configurer.

QUESTION:

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

Merci!

OriginalL'auteur FrancescoMussi | 2015-01-15

  1. 13

    Minimale ng-triables d'Installation (Pas besoin de la charmille. Bower est la confusion pour les demi-finales comme moi, aussi.).

    C'est le minimum de l'installation afin d'en obtenir un Tableau triable avec ng-sortable, qui a fonctionné pour moi.

    Charge nécessaire Javascripts

    1. Charge angular.js

    2. Charge ng-sortable.js (en dist dossier dans
      téléchargé .zip fichier https://github.com/a5hik/ng-sortable)

    3. Charge votre app.js

    4. Charge de la comme.sortable dans votre application
      var app = angular.module('app', ['ngRoute', 'as.sortable']);

    5. Charge votre AppController.js

    De charge nécessaires feuilles de style

    (Trouver à la fois dans dist dossier téléchargé .zip fichier https://github.com/a5hik/ng-sortable)

    1. Charge ng-triables.css

    2. Charge ng-triables.style.css

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

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

    5. Insérer div avec data-as-sortable-item-handle en 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"
            }

        ];

    }
]);
    Bon exemple, mais malheureusement il ne fonctionne pas pour moi. J'ai utilisé ng-triables 1.3.2 et angulaire 1.5.0 et la conviction d'avoir tout ce que vous avez décrit.
    Cela fonctionne pour moi, angulaire 1.5.6 et ng-triables 1.3.6.

    OriginalL'auteur Herr_Hansen

  2. 7

    Il serait utile si nous savions ce que vous entendez par "définition" (si tu veux dire en fait de l'ajouter au projet, ou comment l'utiliser). Il serait également utile si nous savions ce que la pile, le cas échéant, vous avez été l'installation de ce sur.

    Pour Installer

    Les instructions d'installation sont sous la "Usage" de leur Git page.

    1. Exécuter bower install ng-sortable ou bower install ng-sortable -save si vous utilisez yeoman
    2. Ajouter les chemins d'accès à ng-sortable.min.js,ng-sortable.min.css, et ng-sortable.style.min.css à votre projet, lorsque vous ajoutez ces dépend de la pile que vous utilisez.
    3. Ajouter ui.sortable comme une dépendance de votre application ou de votre module. Encore une fois, lorsque cela se passe 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 des articles que vous êtes le tri.
    Cela fonctionne hors de la boîte, mais si vous avez besoin d'une logique personnalisée, changement data-as-sortable à 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 vérifier leur Git page dans la section "Rappels" et "Utilisation".

    Est-il possible d'omettre la ng-repeat et tout simplement x nombre d'éléments uniques sortable?
    oui, vous pouvez manuellement la sortie de ce ng-repeat est en train de faire, ou mieux encore, gardez à l'aide de ng-repeat et juste passer un tableau comprend uniquement les éléments que vous souhaitez sortable

    OriginalL'auteur Tim Aagaard

  3. 0

    Je viens de télécharger un exemple simple de cette impressionnante bibliothèque. J'ai deux divs côte à côte, vous pouvez faire glisser les divs de l'un à l'autre. Je suis à l'aide de données statiques. S'il vous plaît vérifier.
    https://github.com/moytho/DragAndDropAngularJS/tree/master/DragAndDrop ou que vous 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>

    S'il vous plaît essayer et de s'abstenir de répondre à l'aide d'un lien. Alors qu'un lien peut souvent être une partie d'une bonne réponse, vous devrait contenir tous les renseignements pertinents au sein de votre post.
    Je ne sais pas pourquoi les downvotes ici - parfaitement bon exemple de la façon d'utiliser le package, comme demandé dans la question.

    OriginalL'auteur Erick Moises Racancoj Amperez