Tiếng Việt

Hướng dẫn AngularJS

Ứng dụng AngularJS

AngularJS - Ứng dụng Kéo và Thả

Giới thiệu về Kéo và Thả trong AngularJS

Xin chào các pháp sư AngularJS tương lai! Hôm nay, chúng ta sẽ bắt đầu một hành trình thú vị vào thế giới của các ứng dụng kéo và thả bằng AngularJS. Là người giáo viên khoa học máy tính gần gũi của bạn, tôi rất vui mừng được hướng dẫn bạn trong chuyến phiêu lưu này, ngay cả khi bạn chưa từng viết một dòng mã nào trước đây. Đừng lo lắng - chúng ta sẽ đi từng bước một, và trước khi bạn nhận ra, bạn sẽ tạo ra các ứng dụng web tương tác như một chuyên gia!

AngularJS - Drag Application

Kéo và thả là gì?

Trước khi chúng ta nhảy vào mã, hãy nói về điều gì thực sự là kéo và thả. Hãy tưởng tượng bạn đang dọn dẹp desktop của mình. Bạn nhấp vào một tệp, giữ nút chuột xuống, di chuyển nó đến một vị trí mới và thả ra. Đó chính là kéo và thả! Đó là cách để làm cho giao diện người dùng trực quan và tương tác hơn.

Thiết lập Môi trường AngularJS của Chúng ta

Để bắt đầu với ứng dụng kéo và thả của chúng ta, trước tiên chúng ta cần thiết lập môi trường AngularJS. Đừng lo lắng nếu điều này听起来 phức tạp - nó dễ dàng hơn việc làm một bánh mì bơ!

Bước 1: Chèn Thư viện AngularJS

Trước hết, chúng ta cần chèn thư viện AngularJS vào tệp HTML của mình. Chúng ta có thể làm điều này bằng cách thêm dòng sau trong phần <head> của HTML:

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

Dòng này lấy thư viện AngularJS từ máy chủ của Google. Nó giống như đặt một订单 pizza - chúng ta đang yêu cầu trình duyệt đi lấy AngularJS cho chúng ta!

Bước 2: Tạo Ứng dụng AngularJS của Chúng ta

Tiếp theo, chúng ta cần tạo ứng dụng AngularJS của mình. Chúng ta làm điều này bằng cách thêm chỉ thị ng-app vào HTML của mình:

<body ng-app="dragApp">
<!-- Nội dung ứng dụng của chúng ta sẽ đi vào đây -->
</body>

Điều này告诉 AngularJS, "Hey, mọi thứ bên trong thẻ <body> này là một phần của ứng dụng của chúng ta!"

Xây dựng Ứng dụng Kéo và Thả của Chúng ta

Bây giờ chúng ta đã thiết lập môi trường, hãy bắt đầu xây dựng ứng dụng kéo và thả của mình. Chúng ta sẽ tạo một danh sách đơn giản nơi các mục có thể được kéo và sắp xếp lại.

Bước 1: Tạo Controller

Trước hết, chúng ta cần tạo một controller. Hãy tưởng tượng một controller là não của ứng dụng của chúng ta. Đó là nơi chúng ta xác định hành vi của ứng dụng.

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

Trong đoạn mã này, chúng ta đang tạo một module叫做 'dragApp' và một controller gọi là 'DragController'. Chúng ta cũng định nghĩa một mảng các mục mà chúng ta sẽ có thể kéo và thả.

Bước 2: Thiết lập HTML

Bây giờ, hãy thiết lập HTML của chúng ta để hiển thị các mục này:

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

Ở đây, chúng ta sử dụng chỉ thị ng-controller để kết nối HTML của chúng ta với controller mà chúng ta vừa tạo. Chỉ thị ng-repeat tạo một mục danh sách cho mỗi mục trong mảng. Thuộc tính draggable="true" làm cho mỗi mục có thể kéo.

Bước 3: Thực hiện Chức năng Kéo và Thả

Bây giờ đến phần thú vị - thực hiện chức năng kéo và thả! Chúng ta sẽ cần thêm một số bộ xử lý sự kiện vào controller:

angular.module('dragApp', [])
.controller('DragController', function($scope) {
$scope.items = ['Item 1', 'Item 2', 'Item 3', 'Item 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();
};
});

Hãy phân tích điều này:

  • dragStart: Hàm này được gọi khi chúng ta bắt đầu kéo một mục. Nó lưu trữ chỉ số của mục chúng ta đang kéo.
  • drop: Hàm này được gọi khi chúng ta thả một mục. Nó di chuyển mục từ vị trí cũ sang vị trí mới trong mảng.
  • allowDrop: Hàm này cho phép chúng ta thả các mục bằng cách ngăn chặn hành vi mặc định.

Bước 4: Cập nhật HTML

Cuối cùng, hãy cập nhật HTML của chúng ta để sử dụng các hàm mới này:

<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>

Chúng ta đã thêm ba thuộc tính mới vào các thẻ <li> của mình:

  • ng-dragstart: Gọi hàm dragStart khi chúng ta bắt đầu kéo một mục.
  • ng-drop: Gọi hàm drop khi chúng ta thả một mục.
  • ng-dragover: Gọi hàm allowDrop khi chúng ta kéo qua một mục.

Kết luận

Và thế là chúng ta đã có nó, các bạn! Chúng ta đã tạo ra một ứng dụng kéo và thả đơn giản bằng AngularJS. Bây giờ bạn có thể kéo các mục trong danh sách và sắp xếp chúng. Đúng là rất thú vị phải không?

Nhớ rằng, học lập trình giống như học骑自行车。 Ban đầu có thể trông cậy, nhưng với sự luyện tập, bạn sẽ nhanh chóng chạy nhanh. Hãy tiếp tục thử nghiệm, tiếp tục học hỏi, và quan trọng nhất, hãy vui vẻ!

Dưới đây là bảng tóm tắt các phương thức chính chúng ta đã sử dụng trong ứng dụng của mình:

Phương thức Mô tả
dragStart Xử lý bắt đầu của thao tác kéo
drop Xử lý sự kiện thả, sắp xếp lại các mục
allowDrop Cho phép thả bằng cách ngăn chặn hành vi mặc định

Chúc các bạn lập trình vui vẻ, và Angular luôn ở bên cạnh bạn!

Credits: Image by storyset

Hướng Dẫn Trước:
AngularJS - Thẻ Tìm kiếm
Hướng Dẫn Tiếp Theo:
AngularJS - Ứng dụng Giỏ hàng