web-dev-qa-db-ja.com

Angular ng-sortable-動作の基本例

状況：

こんにちはみんな！私のアプリには一種のかんばんがあります。いくつかの列があり、それぞれにアイテムのリストが含まれています。

列間でアイテムをドラッグアンドドロップして、同じ列内で並べ替える必要があります。

ドラッグアンドドロップ（最初の2つ）と並べ替え（3番目）に関連する3つのangularモジュールの前に試しました：

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

Angularドラッグドロップ： https://github.com/codef0rmer/angular-dragdrop

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

それらは素晴らしいドキュメントであり、優れたドキュメントですが、ドラッグアンドドロップと並べ替えを同時に行うことはできないようです。それから私は別のモジュールを見つけました：

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

それはまさに私が必要としているもののようです。しかし、ドキュメントはそれほど明確ではありません。設定方法がわかりません。


質問：

設定方法を教えていただけますか？良い明確な例のあるプランカーはありますか？

ありがとうございました！

javascriptangularjsdrag-and-dropdraggabledroppable
9
FrancescoMussi

最小限のngソート可能なセットアップ（バウアーは必要ありません。バウアーは私のようなセミにとっても混乱です。）

これは、ng-sortableを使用して完全にソート可能な配列を取得するための最小設定であり、私にとってはうまくいきました。

必要なJavascriptをロードします

  1. ロードangular.js

  2. ロードng-sortable.js（ダウンロードした。Zipファイルのdistフォルダーでこれを見つけます https://github.com/a5hik/ng-sortable ）

  3. app.jsをロードします

  4. as.sortableをアプリにロードしますvar app = angular.module('app', ['ngRoute', 'as.sortable']);

  5. AppController.jsをロードします

必要なスタイルシートをロードする

（ダウンロードした。Zipファイルのdistフォルダーで両方を検索します https://github.com/a5hik/ng-sortable ）

  1. ロードng-sortable.css

  2. ロードng-sortable.style.css

  3. 必要な属性（data-as-sortable data-ng-model="sortableList"）を使用してulを作成します

  4. data-as-sortable-itemをliに追加します

  5. data-as-sortable-item-handleを含むdivを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

「設定する」とはどういう意味か（実際にプロジェクトに追加するのか、それともどのように使うのか）を知っていれば助かります。また、これをインストールしているスタックがある場合は、それがわかっていれば役立ちます。

インストールする
インストール手順は、Gitページの「使用法」セクションにあります。

  1. ヨーマンを使用している場合は、bower install ng-sortableまたはbower install ng-sortable -saveを実行します
  2. ng-sortable.min.js、ng-sortable.min.css、およびng-sortable.style.min.cssへのパスをプロジェクトに追加します。これらを追加する場所は、使用しているスタックによって異なります。
  3. アプリまたはモジュールへの依存関係としてui.sortableを追加します。繰り返しますが、これがどこに行くかはスタックによって異なります。

使用する

<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>

ここで、「array」は、並べ替えるアイテムの配列です。これはそのままで機能しますが、カスタムロジックが必要な場合は、data-as-sortableをdata-as-sortable="CustomLogic"に変更します。ここで、「CustomLogic」は、デフォルトの動作をオーバーライドするコントローラーのメソッドです。カスタムロジックを追加する方法の詳細については、「コールバック」と「使用法」のセクションにあるGitページを確認してください。

7
Tim Aagaard

この素晴らしいライブラリの簡単な例をアップロードするだけです。 2つのdivが並んでいます。divを一方から他方にドラッグできます。静的データを使用しています。チェックアウトしてください。 https://github.com/moytho/DragAndDropAngularJS/tree/master/DragAndDrop または、要求されたとおりに、ここで確認できます 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