AngularJS - Приложение перетаскивания

Введение в перетаскивание в AngularJS

Здравствуйте, будущие маги AngularJS! Сегодня мы отправимся в увлекательное путешествие в мир приложений с перетаскиванием, используя AngularJS. Как ваш доброжелательный соседский учитель информатики, я с радостью провожу вас через это приключение, даже если вы еще не написали ни строчки кода. Не волнуйтесь - мы будем двигаться шаг за шагом, и скоро вы будете создавать интерактивные веб-приложения, как профессионал!

AngularJS - Drag Application

Что такое перетаскивание?

Прежде чем мы погрузимся в код, давайте поговорим о том, что такое перетаскивание на самом деле. Представьте, что вы наводите порядок на рабочем столе. Вы нажимаете на файл, удерживаете кнопку мыши, перемещаете его в новое место и отпускаете. Вот и все! Это и есть перетаскивание! Это способ сделать интерфейсы пользователей более интуитивными и интерактивными.

Настройка нашей среды AngularJS

Чтобы начать работу с нашим приложением с перетаскиванием, нам сначала нужно настроить нашу среду AngularJS. Не беспокойтесь, если это звучит сложно - это проще, чем сделать бутерброд с арахисовым маслом!

Шаг 1: Включение библиотеки AngularJS

Сначала нам нужно включить библиотеку AngularJS в наш HTML-файл. Мы можем сделать это, добавив следующую строку в раздел <head> нашего HTML:

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

Эта строка загружает библиотеку AngularJS с серверов Google. Это как заказать пиццу - мы instruct browser'у идти и забирать AngularJS для нас!

Шаг 2: Создание нашего приложения AngularJS

Далее нам нужно создать наше приложение AngularJS. Мы делаем это, добавив директиву ng-app в наш HTML:

<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: Реализация функциональности перетаскивания

Теперь comes fun part - implementing the actual drag and drop functionality! We'll need to add some event handlers to our controller:

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. Вы можете теперь перетаскивать элементы списка и изменять их порядок. Pretty cool, right?

Помните, учиться программировать - это как учиться ездить на велосипеде. Сначала это может казаться неуверенным, но с практикой вы быстро научитесь. Продолжайте экспериментировать, продолжайте учиться и, самое главное, получайте удовольствие!

Вот таблица, резюмирующая основные методы, которые мы использовали в нашем приложении:

Метод	Описание
dragStart	Обработка начала операции перетаскивания
drop	Обработка события отпускания, переносящего элементы
allowDrop	Позволяет放下 элементы, предотвращая стандартное поведение

Счастливо кодируйте, и пусть Angular будет с вами!

Credits: Image by storyset

Предыдущий учебник:

AngularJS - Вкладка поиска

Следующий учебник:

AngularJS - Корзина Applications