javascript Angular ng-sortable - 其工作原理的基本示例

Question

提问by FrancescoMussi

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

我之前尝试过三个与拖放（前两个）和重新排序（第三个）相关的 angular 模块：

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

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

角拖放：https: //github.com/codef0rmer/angular-dragdrop

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

角度 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?

你能告诉我如何设置吗？有一个很好的和清楚的例子的plunker？

Thank you!

谢谢！

Answer 1

回答by Herr_Hansen

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

最小的 ng-sortable 设置（不需要凉亭。凉亭对于像我这样的半决赛也是如此。）。

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

这是使用 ng-sortable 获得完整可排序数组的最低设置，对我有用。

Load necessary Javascripts

加载必要的 Javascript

Load angular.js
Load ng-sortable.js(Find this in dist folder in downloaded .zipfile https://github.com/a5hik/ng-sortable)
Load your app.js
Load the as.sortableinto your app var app = angular.module('app', ['ngRoute', 'as.sortable']);
Load your AppController.js

加载angular.js
加载ng-sortable.js（在下载的.zip文件https://github.com/a5hik/ng-sortable 的dist 文件夹中找到它）
加载你的app.js
将as.sortable加载到您的应用程序中 var app = angular.module('app', ['ngRoute', 'as.sortable']);
加载你的AppController.js

Load necessary Stylesheets

加载必要的样式表

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

（在下载的.zip文件https://github.com/a5hik/ng-sortable 的dist 文件夹中找到两者）

Load ng-sortable.css
Load ng-sortable.style.css
Create ulwith necessary attributes( data-as-sortable data-ng-model="sortableList")
Add data-as-sortable-itemto li
Insert div with data-as-sortable-item-handleinto li

加载ng-sortable.css
加载ng-sortable.style.css
使用必要的属性创建ul( )data-as-sortable data-ng-model="sortableList"
添加data-as-sortable-item到li
将 div withdata-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"
            }

        ];

    }
]);

Answer 2

回答by Tim Aagaard

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.

安装
安装说明位于其 Git 页面的“使用”部分下。

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

运行bower install ng-sortable或者bower install ng-sortable -save如果您使用的是 yeoman
将路径添加到ng-sortable.min.js、ng-sortable.min.css和ng-sortable.style.min.css到您的项目，添加这些路径的位置取决于您使用的堆栈。
添加ui.sortable为您的应用程序或模块的依赖项。同样，这取决于您的堆栈。

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-sortableto 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".

其中“array”是您要排序的项目数组。这将是开箱即用的，但如果您需要自定义逻辑，请更改data-as-sortable为data-as-sortable="CustomLogic"“CustomLogic”是控制器中覆盖默认行为的方法。有关如何添加自定义逻辑的更多详细信息，请查看“回调”和“使用”部分下的 Git 页面。

Answer 3

回答by Erick Moises Racancoj Amperez

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/DragAndDropor as you asked for you can check it out here https://plnkr.co/SRN4u7

我只是上传了这个很棒的库的一个简单示例。我有两个并排的 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>

javascript Angular ng-sortable - 其工作原理的基本示例

提问by FrancescoMussi

回答by Herr_Hansen

回答by Tim Aagaard

回答by Erick Moises Racancoj Amperez

相关推荐

最近更新

标签

javascript Angular ng-sortable - 其工作原理的基本示例

提问by FrancescoMussi

回答by Herr_Hansen

回答by Tim Aagaard

回答by Erick Moises Racancoj Amperez

相关推荐

javascript 如何根据地址动态“生成”谷歌地图？

javascript 空格键触发复选框上的点击事件？

javascript 数组中对象属性的总和

如何使用 JavaScript 将数据从 excel (xlsx, csv) 导入 HTML 页面？

相关推荐

最近更新

标签