以下是您提供的英文文本翻译成繁體中文的版本：

AngularJS - Drag Application

# AngularJS - 拖放應用程式

## AngularJS 中拖放的介紹

你好，未來的 AngularJS 巫師們！今天，我們將踏上一段令人興奮的旅程，進入 AngularJS 的拖放應用程式世界。作為你們親切的人工智慧計算機科學老師，我非常高興能夠指導你們這次冒險，即使你們之前從未寫過一行代碼。別擔心 - 我們會一步步來，很快你們就會像專業人士一樣創建互動網頁應用程式！

### 什麼是拖放？

在我們深入代碼之前，讓我們先來了解一下拖放到底是什麼。想像你正在整理你的桌面。你點擊一個文件，按住滑鼠按鈕，將它移動到新的位置，然後釋放。這就是拖放的作用！這是一種使用戶界面更直觀和互動的方式。

## 設置我們的 AngularJS 環境

要開始我們的拖放應用程式，我們首先需要設置我們的 AngularJS 環境。別擔心這聽起來複雜 - 這比做花生醬三明治還要簡單！

### 步驟 1：引入 AngularJS 函式庫

首先，我們需要在 HTML 文件中引入 AngularJS 函式庫。我們可以通過在 HTML 的 `<head>` 標籤中添加以下代碼來做到這一點：

```html
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

這行代碼從 Google 的伺服器上獲取 AngularJS 函式庫。這就像訂購披薩一樣 - 我們告訴瀏覽器去為我們獲取 AngularJS！

步驟 2：創建我們的 AngularJS 應用程式

接下來，我們需要創建我們的 AngularJS 應用程式。我們通過在 HTML 中添加 ng-app 指令來做到這一點：

<body ng-app="dragApp">
  <!-- 我們的應用程式內容將放在這裡 -->
</body>

這告訴 AngularJS，“嘿，這個 <body> 標籤內的一切都是我們應用程式的一部分！”

建立我們的拖放應用程式

現在，我們已經設置好了環境，讓我們開始建立我們的拖放應用程式。我們將創建一個簡單的列表，其中的項目可以被拖動和重新排序。

步驟 1：創建控制器

首先，我們需要創建一個控制器。將控制器想像成我們應用程式的大腦。這是我們定義應用程式行為的地方。

angular.module('dragApp', [])
  .controller('DragController', function($scope) {
    $scope.items = ['項目 1', '項目 2', '項目 3', '項目 4'];
  });

在這段代碼中，我們創建了一個名為 'dragApp' 的模塊和一個名為 'DragController' 的控制器。我們還定義了一個項目數組，我們將能夠拖動和放置這些項目。

步驟 2：設置 HTML

現在，讓我們設置我們的 HTML 來顯示這些項目：

<div ng-controller="DragController">
  <ul>
    <li ng-repeat="item in items" draggable="true">{{item}}</li>
  </ul>
</div>

在這裡，我們使用 ng-controller 指令將我們的 HTML 連接到我們剛剛創建的控制器。ng-repeat 指令為我們數組中的每個項目創建一個列表項。draggable="true" 屬性使每個項目可拖動。

步驟 3：實現拖放功能

現在來到有趣的部分 - 實現真正的拖放功能！我們需要在控制器中添加一些事件處理器：

angular.module('dragApp', [])
  .controller('DragController', function($scope) {
    $scope.items = ['項目 1', '項目 2', '項目 3', '項目 4'];

    $scope.dragStart = function(e, index) {
      e.dataTransfer.setData('text/plain', index);
    };

    $scope.drop = function(e, index) {
      e.preventDefault();
      var data = e.dataTransfer.getData('text');
      var fromIndex = parseInt(data);
      var toIndex = index;
      $scope.items.splice(toIndex, 0, $scope.items.splice(fromIndex, 1)[0]);
      $scope.$apply();
    };

    $scope.allowDrop = function(e) {
      e.preventDefault();
    };
  });

讓我們分解這段代碼：

dragStart：當我們開始拖動一個項目時，會調用這個函數。它存儲我們正在拖動的項目的索引。
drop：當我們放置一個項目時，會調用這個函數。它將項目從其原始位置移動到數組中的新位置。
allowDrop：這個函數允許我們放置項目，通過防止默認行為。

步驟 4：更新 HTML

最後，讓我們更新我們的 HTML 來使用這些新函數：

<div ng-controller="DragController">
  <ul>
    <li ng-repeat="item in items" draggable="true"
        ng-dragstart="dragStart($event, $index)"
        ng-drop="drop($event, $index)"
        ng-dragover="allowDrop($event)">
      {{item}}
    </li>
  </ul>
</div>

我們在 <li> 標籤中添加了三個新的屬性：

ng-dragstart：當我們開始拖動一個項目時，調用我們的 dragStart 函數。
ng-drop：當我們放置一個項目時，調用我們的 drop 函數。
ng-dragover：當我們在項目上方拖動時，調用我們的 allowDrop 函數。

結論

這就是了，各位！我們使用 AngularJS 創建了一個簡單的拖放應用程式。現在你可以拖動列表中的項目並重新排序它們。很酷吧？

記住，學習編程就像學習騎自行車一樣。起初可能會有些搖搖欲墜，但隨著練習，你很快就會騎得飛快。繼續嘗試，持續學習，最重要的是，玩得開心！

這裡是一個總結我們應用程式中使用的主要方法的表格：

方法	描述
dragStart	處理拖動操作的開始
drop	處理放置事件，重新排序項目
allowDrop	允許放置，防止默認行為

開心編程，願 Angular 伴你左右！

Credits: Image by storyset