次の記事では、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:
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 berikut akan menunjukkan bagaimana tepatnya operasi seret dan lepas akan berprestasi dalam HTML.
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:
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:
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:
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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
