School of Information Systems

Interaksi Drag and Drop Image pada Axure

            Drag and drop image merupakan sebuah fungsi yang disediakan oleh axure, dimana fungsi ini dapat membuat sebuah gambar atau widget dapat di drag sesuai dengan keinginan user. Tidak ada interaksi khusus yang langsung dapat membuat sekaligus di drag dan di drop, tetapi harus menggabungkan beberapa interaksi yang telah disediakan axure yang nantinya dapat menjadi satu kesatuan menjadi interaksi drag and drop image. Interaksi yang dibutuhkan untuk dapat membuat drag and drop image adalah

  1. OnDragStart
    Interaksi ini digunakan ketika ingin memberikan interaksi pada saat widget mulai di drag, maka interaksi apa yang akan terjadi
  2. OnDrag
    Interaksi ini digunakan ketika ingin memberikan interaksi pada saat widget sedang di drag, maka interaksi apa yang akan terjadi, misalnya memberikan perubahan pada widget lain
  3. OnDragDrop
    Interaksi ini digunakan ketika ingin memberikan interaksi pada saat widget sudah selesai di drag atau ketika widget dilepas dari kursor, maka interaksi apa yang akan terjadi

            Dengan memberikan salah satu interaksi dari 3 interaksi yang telah disediakan maka widget yang diberi interaksi sudah bisa di drag sesaui dengan keinginan user, tetapi 3 interaksi tersebut bisa digunakan secara bersamaan untuk menghasilkan sebuah interaksi drag and drop yang bagus. Dalam mengatur interaksi OnDrag tidak terlepas dengan interaski Move yang ada pada bagian action pada Case Editor (OnDrag), karena pada saat di drag widget harus diberikan interaksi move agar widget yang di drag berpindah, pada interaksi move ada 6 jenis interaksi move yang digunakan untuk menentukan perpindah dari widget, yaitu:

a. To : Berpindah dari koordinat awal ke koordinat yang ditentukan
b. By : Berpindah dari koordinat awal ke koordinat yang awal ditambah koordinat yang di tentukan
c. With drag : Berpindah sesuai trigger dari user
d. With drag x : Berpindah sesuai trigger dari user, tapi hanya bisa ke kanan atau ke kiri
e. With drag y : Berpindah sesuai trigger dari user, tapi hanya bisa ke atas atau ke bawah
f. To x, y before drag : Kembali ke koordinat sebelum user memindahkan widget tersebut

            Dengan menggunakan 3 interaksi yaitu OnDrag, OnDragStart dan OnDragDrop dan interaksi move pada case editor, maka widget akan bisa di drag. Untuk interaksi dan animasi yang digunakan itu bergantung pada keinginan user.

Erika Pranoto