Terjemahan ke Bahasa Indonesia

AngularJS - Aplikasi Drag

Pengenalan ke Drag and Drop dalam AngularJS

Hai teman-teman, para ahli AngularJS masa depan! Hari ini, kita akan memulai perjalanan menarik ke dunia aplikasi drag and drop menggunakan AngularJS. Sebagai guru ilmu komputer yang ramah di lingkungan sekitar Anda, saya sangat senang untuk mengantar Anda dalam petualangan ini, bahkan jika Anda belum pernah menulis baris kode tunggal sebelumnya. Jangan khawatir – kita akan berjalan langkah demi langkah, dan sebelum Anda sadar, Anda akan menciptakan aplikasi web interaktif seperti seorang ahli!

AngularJS - Drag Application

Apa Itu Drag and Drop?

Sebelum kita masuk ke kode, mari bicarakan apa arti sebenarnya drag and drop. Bayangkan Anda sedang membersihkan destop Anda. Anda mengklik pada sebuah file, menekan tombol mouse, memindahkannya ke lokasi baru, dan melepaskan. Itu adalah drag and drop dalam aksi! Itu adalah cara untuk membuat antarmuka pengguna menjadi lebih intuitif dan interaktif.

Menyiapkan Lingkungan AngularJS

Untuk memulai aplikasi drag and drop kami, pertama-tama kita perlu menyiapkan lingkungan AngularJS. Jangan khawatir jika ini terdengar kompleks – itu lebih mudah daripada membuat sendiri sandwich mentega kacang!

Langkah 1: Sertakan Library AngularJS

Pertama, kita perlu menyertakan library AngularJS di dalam file HTML kami. Kita dapat melakukan ini dengan menambahkan baris berikut di dalam seksi <head> dari HTML:

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

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

Langkah 2: Buat Aplikasi AngularJS

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

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

Ini memberitahu AngularJS, "Hai, segala sesuatu di dalam tag <body> ini adalah bagian dari aplikasi kita!"

Membangun Aplikasi Drag and Drop

Sekarang kita sudah menyiapkan lingkungan, mari mulai membangun aplikasi drag and drop kita. Kita akan membuat daftar sederhana di mana item dapat digeser dan diurutkan ulang.

Langkah 1: Buat Controller

Pertama, kita perlu membuat controller. Pemandu pikiran aplikasi kita, itu adalah 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 geser dan letakkan.

Langkah 2: Siapkan HTML

Sekarang, mari siapkan HTML 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 list untuk setiap item di dalam array. Atribut draggable="true" membuat setiap item dapat digeser.

Langkah 3: Implementasikan Fungsionalitas Drag and Drop

Sekarang, bagian yang menarik – implementasi fungsionalitas drag and drop sebenarnya! Kita 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 menggeser sebuah item. Itu menyimpan indeks item yang kita geser.
drop: Fungsi ini dipanggil saat kita meletakkan sebuah item. Itu memindahkan item dari posisinya yang lama ke posisi yang baru dalam array.
allowDrop: Fungsi ini mengijinkan kita meletakkan item dengan mencegah perilaku default.

Langkah 4: Perbarui HTML

Akhirnya, mari perbarui HTML kita untuk menggunakan fungsi-fungsi 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 menambahkan tiga atribut baru ke <li> elemen kita:

ng-dragstart: Memanggil fungsi dragStart saat kita mulai menggeser sebuah item.
ng-drop: Memanggil fungsi drop saat kita meletakkan sebuah item.
ng-dragover: Memanggil fungsi allowDrop saat kita menggeser item di atasnya.

Kesimpulan

Dan begitu juga, teman-teman! Kita telah menciptakan aplikasi drag and drop sederhana menggunakan AngularJS. Anda sekarang dapat menggeser item di daftar dan mengurutkan ulang mereka. Bagus, kan?

Ingat, belajar mengoding adalah seperti belajar menunggang sepeda. Mungkin saja tampak wobble di awal, tetapi dengan latihan, Anda akan berjalan dengan lancar dalam waktu singkat. Tetap eksperimen, tetap belajar, dan yang paling penting, bersenang-senang!

Berikut adalah tabel yang menyummariskan metode utama yang kita gunakan dalam aplikasi kita:

Metode	Deskripsi
dragStart	Menangani permulaan operasi geser
drop	Menangani peristiwa meletakkan, mengurutkan ulang item
allowDrop	Mengijinkan meletakkan dengan mencegah perilaku default

Happy coding, dan may the Angular be with you!

Credits: Image by storyset

Tutorial Sebelumnya:

AngularJS - Tab Pencarian

Tutorial Selanjutnya:

AngularJS - Aplikasi Keranjang