Html5 seret dan lepas API untuk mengimplementasikan kode contoh untuk drag dan lepas penyortiran

HTML5 memberikan API drag -dan -drop langsung, yang sangat nyaman bagi kami untuk mencapai efek drag and drop. Untuk mencapai berbagai fungsi drag and drop.

Jika Anda ingin menyeret dan menjatuhkan elemen tertentu, Anda harus mengatur properti yang dapat diseret dari elemen ke True. Elemen IMG dan elemen diatur dengan atribut yang dapat diseret ke True, yang dapat langsung diseret dan dijatuhkan.

Insiden seret dan lepas dihasilkan oleh elemen yang berbeda. Elemen diseret dan dijatuhkan, dan dia akhirnya dapat mencapai elemen yang ingin dia tempatkan di banyak elemen. Di sini, saya sementara merujuk ke elemen dari menyeret dan menjatuhkan dan elemen proses, dan elemen yang saya capai disebut objek target. Objek yang berbeda memiliki acara drag and drop yang berbeda.

Objek Sumber:

1. DragStart: Objek sumber mulai menyeret dan turun.
2. Seret: Selama seret dan jatuhkan objek sumber.
3. Dragend: Sumber objek seret dan turun.

Objek proses:

1. Dragenter: Objek sumber mulai memasuki kisaran proses.
2. Dragover: Objek sumber bergerak dalam kisaran proses.
3. Dragleave: Lingkup objek sumber meninggalkan proses.

Objek target:

1. Jatuhkan: Objek sumber diseret dan jatuh ke objek target.

 <Div ID = Source Draggable = True> A Element </Div> <Div ID = Process> B Elemen </SEV> <DIV ID = Target> C Elemen </div> <script> var Source = document.getElementById '( 'Sumber'), // elemen proces = document.geteLementById ('proses'), // b elemen target = document.geLementById ('target'); Acara DragStart dihasilkan oleh elemen A untuk menghasilkan console.log ('elemen mulai diseret');}, false) proces.addeventristener ('dragner', function (ev) {// acara dragenter dihasilkan oleh b elemen. , False) target.addeventListener ('drop', function (ev) {// event drop dihasilkan oleh console.log ('a elemen ke elemen c');) document.ondragover = function (e) {e.preventDefault ( );} </script>

DataTransfer objek transmisi data disediakan di semua peristiwa drag -dan -drop untuk lulus data antara objek sumber dan objek target. Selanjutnya, kenali metode dan atribut objek ini untuk memahami bagaimana ia mentransmisikan data.

Metode ini disimpan dalam objek DataTransfer. Menerima dua parameter, yang pertama menunjukkan string untuk menyimpan jenis data, dan sekarang mendukung yang berikut:

1. Teks/polos: Teks teks.
2. Teks/html: teks html.
3. Teks/XML: Teks XML.
4. Teks/URI-List: Daftar URL, setiap URL adalah satu baris.

Parameter kedua adalah data yang akan disimpan. Misalnya:

 event.datatransfer.setData ('text/polos', 'hello world');

Metode ini membaca data dari objek DataTransfer. Parameter adalah jenis data yang ditentukan dalam setData. Misalnya:

 event.datatransfer.getData ('text/polos');

Metode ini menghapus data yang disimpan dalam objek DataTransfer. Parameter adalah opsional, untuk tipe data. Jika parameternya kosong, hapus semua jenis data. Misalnya:

 event.datatransfer.cleardata ();

Metode ini diatur untuk menyeret dan menjatuhkan ikon dengan menggunakan elemen IMG. Menerima tiga parameter, yang pertama adalah elemen ikon, yang kedua adalah perpindahan x -axis dari elemen ikon dari penunjuk mouse, dan yang ketiga adalah perpindahan y -axis dari elemen ikon dari penunjuk mouse. Misalnya:

 Var source = document.geteLementById ('source'), icon = document.createelement ('img'); 10, -10)}, false)

Kedua atribut ini digabungkan untuk mengatur efek visual dari drag dan drop.

Perlu dicatat bahwa IE tidak mendukung objek DataTransfer. Ya, tidak peduli versi IE mana yang didukung.

Penggunaan API drag and drop sudah terbiasa dengan hal di atas. Mari kita lihat ide terlebih dahulu:

1. Dalam satu daftar, setiap elemen dapat diseret dan dijatuhkan, dan properti yang dapat diseret diatur ke true untuk setiap elemen.
2. Survei acara DragStart dari setiap elemen untuk membedakan gaya objek sumber.
3. Saat memantau acara Dragenter dari setiap elemen, ketika objek sumber memasuki elemen saat ini, objek sumber ditambahkan sebelum elemen. Dengan cara ini, elemen -elemen di belakangnya akan diperas oleh objek sumber, mencapai efek penyortiran.
4. Namun, akan ditemukan bahwa objek sumber tidak dapat diperingkat ke yang terakhir, dan hanya bisa menjadi yang kedua di kedua dari belakang. Pada saat ini, acara Dragleave dipantau.

Kode utamanya adalah sebagai berikut:

 var source = document.queryselectiveall ('. List'), dragElement = null; for (var i = 0; i <source.length; i ++) {source [i] .addeventListener ('dragstar t', function (ev] ) {dragElement = this;}, false); [i] .addeventListener ('dragleave', function (ev) {if (dragElement! = this) {if (this == this.parentnode.lastelementChildChild || this.parentnod e.lastchild) {this.parentnode.applendchild (dragElements.parentnod e.lastchild) );}}, false)};

Alamat kode lengkap: drag-demo

Ini terutama kompatibel dalam IE, tetapi setidaknya dapat diseret dan diurutkan setidaknya di IE10.

Dan dalam tes sederhana saya, ditemukan bahwa ketika elemen tidak diatur dalam IE, acara Dragleave tidak akan dipicu.

Poin yang lebih penting adalah pada iOS dan Android, yang benar -benar tidak kompatibel. Untungnya, ada plug -di untuk membuatnya kompatibel dengan sempurna di ujung seluler.

Alamat plug-in: iOS-html5-drag-drop-shim

Anda hanya perlu memperkenalkan plug -in dalam kode asli untuk menyeretnya di terminal seluler.

 <script> var iosdragdropshim = {enablenerlave: true} </script> <script src = vendor/ios-drop.js> </cript>

Di atas adalah semua isi artikel ini.