it-swarm.com.ru

Angular ng-sortable - базовый пример того, как это работает

СИТУАЦИЯ:

Привет ребята! В моем приложении у меня есть своего рода канбан: есть несколько столбцов, каждый из которых содержит список элементов.

Мне нужно перетаскивать элементы между столбцами и переупорядочивать их внутри одного столбца.

Я пытался до трех angular модулей, связанных с перетаскиванием (первые два) и переупорядочения (третий):

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

Угловое перетаскивание : https://github.com/codef0rmer/angular-dragdrop

Угловая сортировка по интерфейсу пользователя : https://github.com/angular-ui/ui-sortable

Они хороши, с хорошей документацией, но невозможно перетаскивать и изменять порядок одновременно. Затем я нашел другой модуль:

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

Кажется, это именно то, что мне нужно. Но документация не так понятна. Я не могу понять, как его настроить.


ВОПРОС:

Подскажите пожалуйста, как это настроить? Есть плункер с хорошим и понятным примером?

Спасибо!

9
FrancescoMussi

Minimal ng-sortable Setup (Нет необходимости в бауэре. Бауэр - путаница и для полуфабрикатов, как и я.)

Это минимальная настройка для получения полностью сортируемого массива с помощью ng-sortable, который сработал для меня.

Загрузить необходимые Javascripts

  1. Загрузить angular.js

  2. Загрузить ng-sortable.js (найдите это в папке dist в Скачанном .Zip файле https://github.com/a5hik/ng-sortable )

  3. Загрузите свой app.js 
  4. Загрузите as.sortable в ваше приложение var app = angular.module('app', ['ngRoute', 'as.sortable']);

  5. Загрузите ваш AppController.js

Загрузить необходимые таблицы стилей

(Найти оба в папке dist в загруженном файле .Ziphttps://github.com/a5hik/ng-sortable )

  1. Загрузить ng-sortable.css
  2. Загрузить ng-sortable.style.css 

  3. Создайте ul с необходимыми атрибутами ( data-as-sortable data-ng-model="sortableList")

  4. Добавить data-as-sortable-item в li

  5. Вставьте div с data-as-sortable-item-handle в 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, если вы используете yeoman
  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>

Где "массив" - это массив элементов, которые вы сортируете ... Это будет работать "из коробки", но если вам нужна пользовательская логика, измените data-as-sortable на data-as-sortable="CustomLogic", где "CustomLogic" - это метод в вашем контроллере, который переопределяет значение по умолчанию поведение. Подробнее о том, как добавить пользовательскую логику, можно узнать на странице Git в разделах «Обратные вызовы» и «Использование».

7
Tim Aagaard

Я просто загружаю простой пример этой удивительной библиотеки. У меня есть два 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