ホームページ > 記事 > ウェブフロントエンド > HTML 内でのドラッグ アンド ドロップ
HTML 内でのドラッグ アンド ドロップ
- WBOYオリジナル
- 2024-09-04 16:38:261302ブラウズ
次の記事では、HTML でのドラッグ アンド ドロップの概要を説明します。ドラッグ アンド ドロップは、その便利な機能パターンにより、Web ページに手動で入力を行うことでよく知られている最新の機能です。ドラッグ アンド ドロップ方法は、ユーザーがソース フィールドの項目リストから特定のデータ/オプションを選択し、それをドラッグして宛先フィールドにドロップするプロセスとして説明できます。これは、HTML Web ページからの複数のマウス イベントとともにドキュメント オブジェクト モデルを使用して実装されます。この機能で使用されるさまざまなイベントは、drag、dragstart、dragleave、dragenter、dragover、drop、dragend、drag exit です。
ドラッグ アンド ドロップのイベント
最新のドラッグ アンド ドロップ (dnd) 機能には複数のイベントが含まれています。以下のように 1 つずつ見てみましょう:
| Sr. No | Events | Details Description |
| 1 | Drag | To drag entity(element or text) when the mouse is moved with the element to be dragged. |
| 2 | Dragstart | The very first step in drag and drop is dragstart. It gets executed when the user is going to start with dragging the object to the required location. |
| 3 | Dragenter | Dragenter event is used when the mouse is getting hover on the target element. |
| 4 | Dragleave | This event is used when the user releases a mouse from an element. |
| 5 | Dragover | This event occurs when a mouse is used to over an element. |
| 6 | Drop | This event is used at the end of the drag and drop process for drop element operation. |
| 7 | Dragend | This is one of the most important event in this process for releasing the mouse button from the element to complete the drag procedure. |
| 8 | Dragexit | This event status that the element is no longer in the drag process of urgent target selection of element. |
Mari lihat beberapa atribut data yang akan berlaku operasi Seret dan lepas:
- dataTransfer.dropEffect [ = value ]: Atribut ini digunakan untuk menunjukkan operasi yang sedang dijalankan. Seseorang boleh menetapkannya untuk menggantikan operasi yang telah dipilih. Nilai yang disertakan di dalamnya seperti salinan, pautan, tiada atau pindah.
- dataTransfer.effectAllowed [ = value ]: Mana-mana operasi yang dibenarkan akan dikembalikan melalui atribut ini. Anda juga boleh menetapkan untuk menukar operasi yang telah dipilih.
- dataTransfer.files: Atribut data ini digunakan untuk mendapatkan Senarai fail bagi fail yang akan diseret.
- dataTransfer.addElement(elemen): Ia digunakan untuk memasukkan elemen yang sedia ada ke dalam senarai elemen lain yang berguna untuk memberikan maklum balas seretan.
- dataTransfer.setDragImage(elemen, x, y): Atribut ini sama sedikit dengan di atas untuk mengemas kini maklum balas seret dan membantu menukar maklum balas yang telah sedia ada
- dataTransfer.clearData ( [ format ] ): Ia membantu pengguna mengalih keluar data daripada format yang telah ditetapkan. Jika pengguna meninggalkan hujah, IT akan mengalih keluar semua data.
- dataTransfer.setData(format, data): Ini adalah salah satu atribut popular yang digunakan untuk menambah data tertentu.
- data = dataTransfer.getData(format): Atribut ini dalam operasi Seret dan Seret digunakan untuk mengekstrak data yang ditentukan. Jika tiada data yang sama dengannya, ia akan kembali kepada rentetan kosong.
Sintaks Seret dan Lepas dalam HTML
Berikut ialah beberapa langkah mentakrifkan sintaks untuk seret dan lepas:
Pilih objek untuk menjadi seret: Tetapkan atribut yang benar kepadanya.
<element draggable="true">
Mula menyeret objek:
function dragStart(ev){}
Lepaskan objek:
function dragDrop(ev){}
Contoh Seret dan Lepas dalam HTML
Contoh berikut akan menunjukkan bagaimana tepatnya operasi seret dan lepas akan berprestasi dalam HTML.
Contoh #1
Kod:
<html>
<head>
<title>Drag and Drop Demo</title>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function dragStart(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragDrop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
#box {
margin: auto;
width: 30%;
width: 21%;
height:150px;
border: 2px solid blue;
padding: 2px;
}
#square1, #square2, #square3 {
float: left;
margin: 5px;
padding: 10px;
}
#square1 {
width: 30px;
height: 30px;
background-color: #BEA7CC;
}
#square2 {
width: 60px;
height: 60px;
background-color: #B5D5F5;
}
#square3 {
width: 90px;
height: 90px;
background-color:#F5B5C5 ;
}
h2 {
font-size:20px;
font-weight:bold;
text-align:center;
}
</style>
</head>
<body>
<h2>HTML DRAG AND DROP DEMO</h2>
<div id = "box">
<div id="square1" draggable="true"ondragstart="dragStart(event)"></div>
<div id="square2" draggable="true"ondragstart="dragStart(event)"></div>
<div id="square3" ondrop="dragDrop(event)" ondragover="allowDrop(event)"></div>
</div>
</body>
</html>
Output:
Sebelum seret dan lepas, output pilihan akan seperti yang ditunjukkan di bawah:
Selepas melakukan operasi Seret dan Lepas, outputnya adalah seperti berikut:
Contoh #2
Di sini kita akan melihat contoh lain di mana kita akan mengalihkan imej dari satu lokasi ke lokasi lain yang ditentukan seperti yang ditunjukkan di bawah kod.
Kod:
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function dragStart(ev) {
ev.dataTransfer.setData("text", ev.target.id);
}
function dragDrop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
<style>
.divfirst {
width: 250px;
height: 150px;
padding: 10px;
border: 1px solid black;
background-color: #F5F5F5;
}
p {
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
<p>Image Drag and Drop Demo</p>
<div class="divfirst" ondrop="dragDrop(event)" ondragover="allowDrop(event)">
<img id="drag1"
src="Jerry.jpeg" draggable="true"
ondragstart="dragStart(event)" width="250" height="150"></div>
<br>
<div class= "divfirst"ondrop="dragDrop(event)"
ondragover="allowDrop(event)"></div>
</body>
</html>
Output:
Sebelum operasi seret dan lepas, output ialah:
Selepas operasi seret dan lepas selesai, ia akan kelihatan seperti ini:
Contoh #3
Dalam contoh ini, kita akan melihat cara untuk menyeret dan melepaskan fail di lokasi yang ditentukan:
Kod:
<body>
<div id="filedemo" style="min-height: 150px; border: 1px solid black;"
ondragenter="document.getElementById('output').textContent = ''; event.stopPropagation(); event.preventDefault();"
ondragover="event.stopPropagation(); event.preventDefault();"
ondrop="event.stopPropagation(); event.preventDefault();
dodrop(event);">
DROP FILES HERE...
</div>
<script>
function dodrop(event)
{
var dt = event.dataTransfer;
var files = dt.files;
for (var i = 0; i < files.length; i++) {
output(" File " + i + ":\n(" + (typeof files[i]) + ") : <" + files[i] + " > " +
files[i].name + " " );
}
}
function output(text)
{
document.getElementById("filedemo").textContent += text;
}
</script>
</body>
Output:
Kesimpulan
Seret dan lepas HTML ialah salah satu entiti antara muka pengguna yang paling penting yang akan digunakan untuk tujuan berbeza seperti menyalin, memadam atau merakam. Ia berfungsi pada acara dan atribut yang berbeza, seperti yang disenaraikan di atas. Ia melakukan operasi apabila anda memilih beberapa objek dan kemudian menjatuhkannya di lokasi yang ditentukan.
以上がHTML 内でのドラッグ アンド ドロップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。