Belajar HTML5 Element Drag And Drop HTML5

• effectsAllowed
• dropEffect
• setDragImage()

Anda dapat mengakses objek dalam drag start dan drop event Data Transfer. Dalam contoh berikut, properti diatur drag start pada DataTransfer objek di acara listener effects Allowed.

function dragStart(event) {
    event.dataTransfer.effectsAllowed = "copy";
    event.dataTransfer.setData('text/html', "You dragged the image!");
    event.target.style.border = "1px solid #cccccc";
}   

Effects Allowed Atribut digunakan untuk menampilkan gaya mouse saat element ditarik dan dilepaskan. Contoh tipikal adalah saat menyeret element melalui area lepas, mouse akan berubah. Effects Allowed Nilai opsional dari atribut ini adalah:

• none
• copy
• move
• copy Move
• link
• link Move
• copy Link
• all
• uninitialized

drop Effect Atribut adalah style mouse saat menyeret element melalui area peletakan. Tampaknya browser saat ini tidak mendukung atribut ini. Nilai opsionalnya adalah:

• none
• copy
• link
• move

set Drag Image (image, x, y) Fungsi tersebut dapat menampilkan gambar yang ditentukan saat pengguna menyeret element. Secara default, salinan element yang tembus cahaya ditampilkan saat element diseret, dan gambar yang berbeda dapat disetel melalui fungsi ini. Atribut x and y digunakan untuk mengatur offset posisi gambar yang ditampilkan.

Berikut adalah dragStart() contoh kode yang menggunakan fungsi tersebut:

function dragStart(event) {
    event.dataTransfer.effectAllowed  = "all";
    event.dataTransfer.dropEffect     = "copy";
 
    var dragImage = document.createElement('img');
    dragImage.src = dragImageUrl;
    dragImage.width = 75;
    event.dataTransfer.setDragImage(dragImage, 0, 0);
     
    event.dataTransfer.setData('text/html', "You dragged the image!");
    event.target.style.border = "1px solid #cccccc";
}             

Drag File ke Browser

Kami juga dapat menarik dan melepaskan file di sistem operasi ke browser, dan melihat nama dan konten file melalui API File HTML5. Berikut ini contoh kodenya: 

var droptarget2 = document.getElementById("droptarget2");
droptarget2.addEventListener('drop', drop , false);
 
function drop(event) {
 
    // Files - array of dragged files.
    var files = event.dataTransfer.files;
 
    for(var i= 0; i < files.length; i++){
        var file = files[i];
        console.log("file: " + file.name);
    }
 
    event.preventDefault();
    return false;
}         

Catatan bahwa ini drop() metode bukan panggilan fungsi getData(), tetapi DataTransfer sebuah files atribut untuk diakses. files Atribut berisi daftar file yang diseret ke browser.