AngularJS拖放

AngularJS拖放是AngularJS框架的内置部分，提供了拖放操作的支持。使用这个功能，开发人员可以轻松地创建交互式的用户界面，使用户可以移动和更改页面上的元素。

要求

本教程使用AngularJS 1.6.9版本和最新的AngularJS拖放库。

安装AngularJS拖放库

要使用AngularJS拖放库，需要将其添加到您的应用中。您可以通过以下方式完成：

1. 下载 angular-drag-and-drop-lists 库，或通过npm或bower进行安装。
2. 将库中的 angular-drag-and-drop.min.js 文件添加到您的项目中。
3. 在您的AngularJS模块中注入 dndLists 模块，以便在应用程序中使用拖放功能。

angular.module('myApp', ['dndLists']);

拖动元素

要使元素可拖动，需要将 dnd-draggable 属性添加到元素。例如，要将 <div> 元素设置为可拖动：

<div dnd-draggable></div>

要限制拖动操作的方向，可以使用 dnd-draggable 属性提供的选项：

<div dnd-draggable="options"></div>

其中 options 是一个包含以下可选属性的对象：

• enabled：指示是否启用拖动，可选值为 true 或 false。
• effectAllowed：定义允许的放置动作，可选值包括 copy、move、copyMove、link 和 none。
• type：指定元素的类型，以便允许或禁止其与其他拖动元素进行交互。

放置元素

要使元素成为一个可放置目标，需要将 dnd-list 或 dnd-drop 属性添加到元素。例如，要允许元素在列表中放置到另一个列表：

<ul dnd-list="myList" dnd-drop="onDrop(event, index, item)">
  <li ng-repeat="item in myList" dnd-draggable="item" dnd-effect-allowed="move">{{item}}</li>
</ul>

这个示例中，onDrop() 方法会在元素被放置时被调用。它接收三个参数：event 对象，表示放置事件；index，表示被放置的位置；item，表示被拖动的元素。

示例

<div ng-app="myApp" ng-controller="myCtrl">
  <div dnd-draggable="true" dnd-moved="onMoved()" dnd-effect-allowed="move" dnd-type="'person'">Person 1</div>
  <div dnd-draggable="true" dnd-moved="onMoved()" dnd-effect-allowed="move" dnd-type="'person'">Person 2</div>
  <div dnd-draggable="true" dnd-moved="onMoved()" dnd-effect-allowed="move" dnd-type="'person'">Person 3</div>
  
  <ul dnd-list="people" dnd-drop="onDrop(event, index, item)">
    <li ng-repeat="person in people" dnd-draggable="person" dnd-type="'person'" dnd-effect-allowed="move">{{person}}</li>
  </ul>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://cdn.rawgit.com/marceljuenemann/angular-drag-and-drop-lists/v2.0.0/dist/angular-drag-and-drop.min.js"></script>
<script>
  var app = angular.module('myApp', ['dndLists']);
  
  app.controller('myCtrl', function($scope) {
    $scope.people = [];
    
    $scope.onMoved = function() {
      console.log('Element was moved');
    };
    
    $scope.onDrop = function(event, index, item) {
      $scope.people.splice(index, 0, item);
    };
  });
</script>

总结

AngularJS拖放是AngularJS框架的一个内置的、易于使用的部分，它可以帮助您快速创建具有交互性的用户界面并使拖放操作变得轻而易举。通过在元素上添加 dnd-draggable 和 dnd-list 或 dnd-drop 属性，您可以定义元素的拖动和放置行为。