Kode spesifiknya adalah sebagai berikut:
<!--Kodenya adalah sebagai berikut. Bagian bawah menunjukkan 9 potongan gambar berukuran 250*250 yang saya gunakan untuk pengujian--><!DOCTYPE html><html><head> <meta charset=utf-8> <title>drag Seret</title> <style> .box{ float: kiri; } img{ lebar: 150 piksel; tinggi: 150 piksel; margin:80px otomatis; bantalan: 5px; lebar: 460px } </style></head><body> <div id=puzzle> <div class=box><img <div class=box><img <div class =kotak><img <div kelas=kotak><img <div kelas=kotak><img <div kelas=kotak><img <div kelas=kotak><img <div kelas=kotak><img <div class=kotak><img </div> <skrip> var gambar = dokumen.getElementsByTagName(img); var kotak = dokumen.getElementsByClassName(kotak); ; var laluGambar; for(biarkan i=0;i<gambar.panjang;i++){ sumber = gambar+i+.jpg; gambar[i].setAttribute(src,sumber); gambar[i].onmousedown = fungsi(){ sekarangImage = ini; sekarangImageBox = ini.parentNode; } kotak[i].ondragover = fungsi(acara){ acara.preventDefault( ); //Hapus perilaku default event ondragover, yang tidak dapat menempatkan data atau elemen ke elemen lain secara default} box[i].ondrop = function(event){thenImage = kotak[i].childNodes[0]; kotak[i].appendChild(nowImage); sekarangImageBox.appendChild(thenImage); MeringkaskanDi atas adalah teka-teki gambar yang diimplementasikan oleh fungsi drag and drop HTML5 yang diperkenalkan oleh editor. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!