HTML5 - Seret & lepas

Drag and Drop (DnD) adalah konsep Antarmuka Pengguna yang kuat yang membuatnya mudah untuk menyalin, menyusun ulang, dan menghapus item dengan bantuan klik mouse. Ini memungkinkan pengguna untuk mengklik dan menahan tombol mouse di atas elemen, menyeretnya ke lokasi lain, dan melepaskan tombol mouse untuk melepaskan elemen di sana.

Untuk mencapai fungsionalitas seret dan lepas dengan HTML4 tradisional, pengembang harus menggunakan pemrograman JavaScript yang kompleks atau kerangka kerja JavaScript lainnya seperti jQuery, dll.

Sekarang HTML 5 hadir dengan Drag and Drop (DnD) API yang menghadirkan dukungan DnD asli ke browser sehingga lebih mudah untuk membuat kode.

HTML 5 DnD didukung oleh semua browser utama seperti Chrome, Firefox 3.5 dan Safari 4 dll.

Seret dan Jatuhkan Acara

Ada sejumlah peristiwa yang dipicu selama berbagai tahap operasi seret dan lepas. Acara ini tercantum di bawah -

Sr.No.	Acara & Deskripsi
1	dragstart Kebakaran saat pengguna mulai menyeret objek.
2	dragenter Diaktifkan saat mouse pertama kali digerakkan di atas elemen target saat drag terjadi. Pendengar acara ini harus menunjukkan apakah penurunan diperbolehkan di lokasi ini. Jika tidak ada pendengar, atau pendengar tidak melakukan operasi, maka penurunan tidak diizinkan secara default.
3	dragover Peristiwa ini dijalankan saat mouse digerakkan di atas elemen saat tarik terjadi. Sering kali, operasi yang terjadi selama pemroses akan sama dengan acara dragenter.
4	dragleave Peristiwa ini dijalankan ketika mouse meninggalkan elemen saat drag terjadi. Pendengar harus menghapus penyorotan atau penanda penyisipan yang digunakan untuk umpan balik drop.
5	drag Kebakaran setiap kali mouse digerakkan saat objek sedang diseret.
6	drop Peristiwa pelepasan dijalankan pada elemen tempat pelepasan terjadi di akhir operasi seret. Pendengar akan bertanggung jawab untuk mengambil data yang sedang diseret dan memasukkannya di lokasi pelepasan.
7	dragend Kebakaran saat pengguna melepaskan tombol mouse sambil menyeret objek.

Note- Perhatikan bahwa hanya peristiwa tarik yang diaktifkan; peristiwa mouse seperti mousemove tidak diaktifkan selama operasi tarik.

Objek DataTransfer

Metode event listener untuk semua event drag and drop menerima Event objek yang memiliki atribut readonly disebut dataTransfer.

Itu event.dataTransfer kembali DataTransfer objek yang terkait dengan acara tersebut sebagai berikut -

function EnterHandler(event) {
   DataTransfer dt = event.dataTransfer;
   .............
}

The datatransfer objek menyimpan data tentang drag dan drop operasi. Data ini dapat diambil dan diatur dalam berbagai atribut yang terkait dengan objek DataTransfer seperti yang dijelaskan di bawah ini -

Sr.No.	Atribut DataTransfer dan deskripsinya
1	dataTransfer.dropEffect [ = value ] Mengembalikan jenis operasi yang saat ini dipilih. Atribut ini dapat diatur, untuk mengubah operasi yang dipilih. Nilai yang mungkin adalah tidak ada, salin, tautkan, dan pindahkan.
2	dataTransfer.effectAllowed [ = value ] Mengembalikan jenis operasi yang diizinkan. Atribut ini dapat diatur, untuk mengubah operasi yang diizinkan. Nilai yang mungkin adalah none, copy, copyLink, copyMove, link, linkMove, move, all dan uninitialized.
3	dataTransfer.types Menampilkan DOMStringList yang mencantumkan format yang disetel di acara dragstart. Selain itu, jika ada file yang diseret, salah satu jenisnya adalah string "File".
4	dataTransfer.clearData ( [ format ] ) Menghapus data dari format yang ditentukan. Menghapus semua data jika argumen dihilangkan.
5	dataTransfer.setData(format, data) Menambahkan data yang ditentukan.
6	data = dataTransfer.getData(format) Mengembalikan data yang ditentukan. Jika tidak ada data seperti itu, kembalikan string kosong.
7	dataTransfer.files Mengembalikan FileList dari file yang sedang diseret, jika ada.
8	dataTransfer.setDragImage(element, x, y) Menggunakan elemen yang diberikan untuk memperbarui umpan balik seret, menggantikan umpan balik yang ditentukan sebelumnya.
9	dataTransfer.addElement(element) Menambahkan elemen yang diberikan ke daftar elemen yang digunakan untuk membuat umpan balik seret.

Proses Tarik dan Lepas

Berikut adalah langkah-langkah yang harus dilakukan untuk mengimplementasikan operasi Drag and Drop -

Langkah 1 - Membuat Objek Dapat Diseret

Berikut langkah-langkah yang harus diambil -

Jika Anda ingin menyeret elemen, Anda perlu menyetel draggable atribut untuk true untuk elemen itu.
Setel pendengar acara untuk dragstart yang menyimpan data yang sedang diseret.
Pendengar acara dragstart akan menyetel efek yang diizinkan (salin, pindahkan, tautkan, atau beberapa kombinasi).

Berikut adalah contoh untuk membuat objek bisa diseret -

<!DOCTYPE HTML>

<html>
   <head>
      
      <style type = "text/css">
         
         #boxA, #boxB {
            float:left;padding:10px;margin:10px; -moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      
      <script type = "text/javascript">
         
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed = 'move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            
            return true;
         }
      </script>
      
   </head>
   <body>
      
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to drag the purple box around.</div>
         
         <div id = "boxA" draggable = "true" 
            ondragstart = "return dragStart(ev)">
            <p>Drag Me</p>
         </div>
         
         <div id = "boxB">Dustbin</div>
      </center>
      
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -

Langkah 2 - Menjatuhkan Objek

Untuk menerima penurunan, target penurunan harus mendengarkan setidaknya tiga peristiwa.

Itu dragenterevent, yang digunakan untuk menentukan apakah target drop akan menerima drop atau tidak. Jika penyerahan diterima, maka acara ini harus dibatalkan.
Itu dragoveracara, yang digunakan untuk menentukan umpan balik apa yang akan ditampilkan kepada pengguna. Jika acara dibatalkan, maka umpan balik (biasanya kursor) diperbarui berdasarkan nilai atribut dropEffect.
Terakhir, file drop acara, yang memungkinkan penurunan sebenarnya dilakukan.

Berikut adalah contoh untuk menjatuhkan suatu benda ke benda lain -

<html>
   <head>
      <style type="text/css">
         #boxA, #boxB {
            float:left;padding:10px;margin:10px;-moz-user-select:none;
         }
         #boxA { background-color: #6633FF; width:75px; height:75px;  }
         #boxB { background-color: #FF6699; width:150px; height:150px; }
      </style>
      <script type="text/javascript">
         function dragStart(ev) {
            ev.dataTransfer.effectAllowed='move';
            ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));
            ev.dataTransfer.setDragImage(ev.target,0,0);
            return true;
         }
         function dragEnter(ev) {
            event.preventDefault();
            return true;
         }
         function dragOver(ev) {
            return false;
         }
         function dragDrop(ev) {
            var src = ev.dataTransfer.getData("Text");
            ev.target.appendChild(document.getElementById(src));
            ev.stopPropagation();
            return false;
         }
      </script>
   </head>
   <body>
      <center>
         <h2>Drag and drop HTML5 demo</h2>
         <div>Try to move the purple box into the pink box.</div>
         <div id="boxA" draggable="true" ondragstart="return dragStart(event)">
            <p>Drag Me</p>
         </div>
         <div id="boxB" ondragenter="return dragEnter(event)" ondrop="return dragDrop(event)" ondragover="return dragOver(event)">Dustbin</div>
      </center>
   </body>
</html>

Ini akan menghasilkan hasil sebagai berikut -