Fra*_*ssi 9 javascript drag-and-drop droppable draggable angularjs
情况:
大家好!在我的应用程序中,我有一种看板:有一些列,每列都包含一个项目列表.
我需要在列之间拖放项目并在同一列内重新排序.
我之前尝试过三个与拖放相关的角度模块(前两个)和重新排序(第三个):
ngDraggable:https://github.com/fatlinesofcode/ngDraggable
Angular dragdrop:https://github.com/codef0rmer/angular-dragdrop
Angular ui-sortable:https://github.com/angular-ui/ui-sortable
它们很好,文档很好,但似乎不可能同时拖放和重新排序.然后我找到另一个模块:
ng-sortable:https://github.com/a5hik/ng-sortable
这似乎正是我所需要的.但文档并不那么清楚.我无法理解如何设置它.
题:
你能告诉我怎么设置它吗？有一个有良好而清晰的例子的掠夺者？
谢谢!
Her*_*sen 13
最小的ng-sortable设置(不需要凉亭.Bower对我这样的半成品也很困惑.).
这是获得具有ng-sortable的完整可排序数组的最小设置,这对我有用.
加载必要的Javascripts
加载angular.js
加载ng-sortable.js(在下载的.zip文件的dist文件夹中找到此文件https://github.com/a5hik/ng-sortable)
将as.sortable加载到您的应用程序中
var app = angular.module('app', ['ngRoute', 'as.sortable']);
加载AppController.js
加载必要的样式表
(在下载的.zip文件中找到dist文件夹中的两个文件https://github.com/a5hik/ng-sortable)
加载ng-sortable.style.css
用必要的属性创建ul() data-as-sortable data-ng-model="sortableList"
添加data-as-sortable-item到李
将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"
}
];
}
]);
如果我们通过"设置"知道你的意思(无论你是将其实际添加到项目中,还是如何使用它),这将有所帮助.如果我们知道你正在安装它的堆栈(如果有的话),它也会有所帮助.
安装
安装说明位于Git页面的"使用"部分下.
bower install ng-sortable或bower install ng-sortable -save如果你使用自耕农ng-sortable.min.js,ng-sortable.min.css和ng-sortable.style.min.css你的项目,在其中添加这些依赖于什么堆栈你使用.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页面.
| 归档时间： |
|
| 查看次数： |
17164 次 |
| 最近记录： |