要使用AngularJS和angular-drag-and-drop-lists库来实现移动项目,你可以按照以下步骤操作:
AngularJS Drag and Drop Lists
angular.module('myApp', ['angular-dragula'])
angular.module('myApp').controller('myController', function($scope) {
$scope.projects = [
{ name: 'Project 1', category: 'Category 1' },
{ name: 'Project 2', category: 'Category 1' },
{ name: 'Project 3', category: 'Category 2' },
{ name: 'Project 4', category: 'Category 2' },
{ name: 'Project 5', category: 'Category 3' }
];
});
draggable
和droppable
指令来创建可拖拽的项目列表。
-
{{ project.name }}
dragulaServiceProvider
来配置拖拽列表的行为。angular.module('myApp').config(function(dragulaServiceProvider) {
dragulaServiceProvider.options('projects-bag', {
moves: function (el, container, handle) {
// 可以自定义移动项目的条件
// 返回true表示可以移动,返回false表示不可移动
return handle.classList.contains('handle');
}
});
});
这样,你就可以使用AngularJS和angular-drag-and-drop-lists库来实现移动项目了。你可以根据需要自定义项目的样式和行为。