AngularJS - Aplikasi Seret dan Letak

Pengenalan ke Seret dan Letak di AngularJS

Hai sana, para ahli AngularJS masa depan! Hari ini, kita akan memulai sebuah perjalanan menarik ke dunia aplikasi seret dan letak menggunakan AngularJS. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk menghidahkan Anda melalui petualangan ini, bahkan jika Anda belum pernah menulis baris kode tunggal sebelumnya. Jangan khawatir – kita akan mengambil langkah demi langkah, dan sebelum Anda tahu, Anda akan menciptakan aplikasi web interaktif seperti seorang ahli!

AngularJS - Drag Application

Apa Itu Seret dan Letak?

Sebelum kita masuk ke kode, mari bicarakan apa arti seret dan letak. Bayangkan Anda membersihkan desktop Anda. Anda mengklik sebuah file, menahan tombol mouse, memindahkannya ke lokasi baru, dan melepaskan. Itu adalah seret dan letak dalam aksi! Itu adalah cara untuk membuat antarmuka pengguna lebih intuitif dan interaktif.

Menyiapkan Lingkungan AngularJS

Untuk memulai aplikasi seret dan letak kita, pertama-tama kita perlu mengatur lingkungan AngularJS kita. Jangan khawatir jika ini terdengar rumit – itu lebih mudah daripada membuat sendang mentega!

Langkah 1: Sertakan Pustaka AngularJS

Pertama, kita perlu menyertakan pustaka AngularJS di file HTML kita. Kita dapat melakukan ini dengan menambahkan baris berikut di dalam bagian <head> file HTML kita:

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

Baris ini mengambil pustaka AngularJS dari server Google. Itu seperti memesan pizza – kita meminta browser untuk mendapatkan AngularJS untuk kita!

Langkah 2: Buat Aplikasi AngularJS

Berikutnya, kita perlu membuat aplikasi AngularJS kita. Kita melakukan ini dengan menambahkan direktif ng-app ke HTML kita:

<body ng-app="dragApp">
<!-- Konten aplikasi kita akan berada di sini -->
</body>

Ini memberitahu AngularJS, "Hai, semua yang berada dalam tag <body> ini adalah bagian dari aplikasi kita!"

Membangun Aplikasi Seret dan Letak

Sekarang kita sudah mengatur lingkungan kita, mari mulai membangun aplikasi seret dan letak kita. Kita akan membuat daftar sederhana di mana item dapat diseret dan diurutkan kembali.

Langkah 1: Buat Controller

Pertama, kita perlu membuat controller. PERTimbangkan controller sebagai otak aplikasi kita. Itu tempat kita mendefinisikan perilaku aplikasi kita.

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

Dalam kode ini, kita menciptakan sebuah modul yang disebut 'dragApp' dan sebuah controller yang disebut 'DragController'. Kita juga mendefinisikan array item yang kita akan dapat seret dan letak.

Langkah 2: Siapkan HTML

Sekarang, mari siapkan HTML kita untuk menampilkan item ini:

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

Di sini, kita menggunakan direktif ng-controller untuk menghubungkan HTML kita ke controller yang kita buat. Direktif ng-repeat membuat item daftar untuk setiap item dalam array. Atribut draggable="true" membuat setiap item dapat diseret.

Langkah 3: Implementasikan Fungsionalitas Seret dan Letak

Sekarang mari kita implementasikan fungsionalitas seret dan letak sebenarnya! Kita akan perlu menambahkan beberapa penghandle event ke controller kita:

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();
};
});

mari kitauraikan ini:

dragStart: Fungsi ini dipanggil saat kita mulai menggerakkan item. Itu menyimpan indeks item yang kita seret.
drop: Fungsi ini dipanggil saat kita meletakkan item. Itu memindahkan item dari posisi lama ke posisi baru dalam array.
allowDrop: Fungsi ini memungkinkan kita meletakkan item dengan mencegah perilaku default.

Langkah 4: Update HTML

Akhirnya, mari kita perbarui HTML kita untuk menggunakan fungsi baru ini:

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

Kami telah menambahkan tiga atribut baru ke <li> elemen kita:

ng-dragstart: Memanggil fungsi dragStart kita saat kita mulai menggerakkan item.
ng-drop: Memanggil fungsi drop kita saat kita meletakkan item.
ng-dragover: Memanggil fungsi allowDrop kita saat kita menggerakkan item di atas item lain.

Kesimpulan

Dan begitu juga, teman-teman! Kita telah menciptakan aplikasi seret dan letak sederhana menggunakan AngularJS. Sekarang Anda dapat menggerakkan item di daftar dan mengurutkannya kembali. Bagus kan?

Ingat, belajar mengkode adalah seperti belajar menunggang sepeda. Itu mungkin tampak wobble di awal, tapi dengan latihan, Anda akan mampu menunggang sepeda dengan mudah. Tetap mencoba, tetap belajar, dan yang paling penting, bersenang-senang!

Berikut ini adalah tabel yang menggabungkan metode utama yang kita gunakan dalam aplikasi kita:

Metode	Deskripsi
dragStart	Menangani permulaan operasi seret
drop	Menangani event letak, mengurutkan item
allowDrop	Memungkinkan letakkan dengan mencegah perilaku default

Happy coding, dan semoga Angular selalu bersama Anda!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Tab Carian

Tutorial Seterusnya:

AngularJS - Aplikasi Troli