AngularJs中的拖放功能

Question

我正在尝试在我的应用程序中使用拖放功能，我下载了可在此处找到的拖放模块：https://github.com/a5hik/ng-sortable，我需要使用一个如下所示的简单示例： http://a5hik.github.io/ng-sortable/#/kanban 我不知道如何使用它，如果我需要下载另一件事。 在此先感谢您的帮助

Answer 1

更新：这是一个简单的工作示例：Plunker

只需按照此link mentioend.

的步骤操作即可

第1步：确保在html中加载脚本

<script type="text/javascript" src="dist/ng-sortable.min.js"></script>
<link rel="stylesheet" type="text/css" href="dist/ng-sortable.min.css">

<!-- OPTIONAL: default style -->
<link rel="stylesheet" type="text/css" href="dist/ng-sortable.style.min.css">

第2步：并将可排序模块注入依赖项

angular.module('xyzApp', ['as.sortable', '....']);

第3步：使用以下html结构调用指令

<强> HTML

<ul data-as-sortable="board.dragControlListeners" data-ng-model="items">
   <li data-ng-repeat="item in items" data-as-sortable-item>
      <div data-as-sortable-item-handle></div>
   </li>
</ul>

第4步：在调用控制器中定义回调

<强> JS

$scope.dragControlListeners = {
    accept: function (sourceItemHandleScope, destSortableScope) {return boolean}//override to determine drag is allowed or not. default is true.
    itemMoved: function (event) {//Do what you want},
    orderChanged: function(event) {//Do what you want},
    containment: '#board'//optional param.
    clone: true //optional param for clone feature.
    allowDuplicates: false //optional param allows duplicates to be dropped.
};

$scope.dragControlListeners1 = {
        containment: '#board'//optional param.
        allowDuplicates: true //optional param allows duplicates to be dropped.
};

您可以使用F12密钥检查上面提到的确切示例。

Answer 2

尝试使用此模块可能会有所帮助

http://angular-dragdrop.github.io/angular-dragdrop/