People Innovation Excellence

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.


Published at : Updated
Leave Your Footprint

    Periksa Browser Anda

    Check Your Browser

    Situs ini tidak lagi mendukung penggunaan browser dengan teknologi tertinggal.

    Apabila Anda melihat pesan ini, berarti Anda masih menggunakan browser Internet Explorer seri 8 / 7 / 6 / ...

    Sebagai informasi, browser yang anda gunakan ini tidaklah aman dan tidak dapat menampilkan teknologi CSS terakhir yang dapat membuat sebuah situs tampil lebih baik. Bahkan Microsoft sebagai pembuatnya, telah merekomendasikan agar menggunakan browser yang lebih modern.

    Untuk tampilan yang lebih baik, gunakan salah satu browser berikut. Download dan Install, seluruhnya gratis untuk digunakan.

    We're Moving Forward.

    This Site Is No Longer Supporting Out-of Date Browser.

    If you are viewing this message, it means that you are currently using Internet Explorer 8 / 7 / 6 / below to access this site. FYI, it is unsafe and unable to render the latest CSS improvements. Even Microsoft, its creator, wants you to install more modern browser.

    Best viewed with one of these browser instead. It is totally free.

    1. Google Chrome
    2. Mozilla Firefox
    3. Opera
    4. Internet Explorer 9
    Close