Login/Register
Angular ng-sortable - Basic example of how it works
Asked Answered
javascriptangularjsdrag-and-dropdraggabledroppable
B

3

10

SITUATION:

Hello guys! In my app i have a sort of kanban: there are some columns, each containing a list of items.

I need to drag and drop items among columns and reorder them inside the same column.

I have tried before three angular modules related with drag and drop (first two) and reordering (third):

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

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

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

They are nice, with good documentation, but it seems not possible to drag and drop and reorder at the same time. Then i found another module:

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

It seems to be exactly what i need. But the documentation is not so clear. I am not able to understand how to set it up.


QUESTION:

Can you show me please how to set it up? There is a plunker with a good and clear example?

Thank you!

Baler answered 15/1, 2015 at 9:19 Comment(0)
P
14

Minimal ng-sortable Setup (No need for bower. Bower is confusion for semis like me, too.).

This is the minimum setup to get a full sortable Array with ng-sortable, that worked for me.

Load necessary Javascripts

  1. Load angular.js

  2. Load ng-sortable.js (Find this in dist folder in downloaded .zip file https://github.com/a5hik/ng-sortable)

  3. Load your app.js

  4. Load the as.sortable into your app var app = angular.module('app', ['ngRoute', 'as.sortable']);

  5. Load your AppController.js

Load necessary Stylesheets

(Find both in dist folder in downloaded .zip file https://github.com/a5hik/ng-sortable)

  1. Load ng-sortable.css

  2. Load ng-sortable.style.css

  3. Create ul with necessary attributes ( data-as-sortable data-ng-model="sortableList" )

  4. Add data-as-sortable-item to li

  5. Insert div with data-as-sortable-item-handle into 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"
            }

        ];

    }
]);
Proctor answered 31/8, 2015 at 14:23 Comment(2)
Good example but sadly it doesn't work for me. I used ng-sortable 1.3.2 and angular 1.5.0 and belief to have everything as you described. – Formica
This works for me, angular 1.5.6 and ng-sortable 1.3.6. – Floppy
C
7

It would help if we knew what you mean by "setting it up" (whether you mean actually adding it to the project, or how to use it). It would also help if we knew what stack, if any, you were installing this on.

To Install
The install instructions are under the "Usage" section of their Git page.

  1. Run bower install ng-sortable or bower install ng-sortable -save if you're using yeoman
  2. Add the paths to ng-sortable.min.js,ng-sortable.min.css, and ng-sortable.style.min.css to your project, where you add these is dependent on what stack you're using.
  3. Add ui.sortable as a dependency to your app or module. Again, where this goes is dependent on your stack.

To Use

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

Where "array" is the array of items you're sorting. This will work out of the box, but if you need custom logic, change data-as-sortable to data-as-sortable="CustomLogic" Where "CustomLogic" is a method in your controller that overrides the default behavior. For more details on how to add custom logic check their Git page under the section "Callbacks" and "Usage".

Cramer answered 21/1, 2015 at 18:15 Comment(2)
Is it possible to omit the ng-repeat and simply have x number of unique elements sortable? – Reasonless
@Reasonless yes, you can manually output what ng-repeat is doing, or better yet, keep using ng-repeat and just pass in an array comprised of only the items you want sortable – Cramer
A
0

I just upload a simple example of this awesome library. I have two divs side by side, you can drag divs from one to the other. I'm using static data. Please check it out. https://github.com/moytho/DragAndDropAngularJS/tree/master/DragAndDrop or as you asked for you can check it out here 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>

Acerate answered 15/4, 2016 at 2:5 Comment(2)
Please try and refrain from answering using only a link. While a link can often be a part of a good answer, you should contain all relevant information within your post. – Ruthenian
Not sure why the downvotes here - perfectly good example of how to use the package, as requested in the question. – Valdes

© 2022 - 2024 — McMap. All rights reserved.