HTML 内でのドラッグアンドドロップ-htmlチュートリアル-php.cn

HTML 内でのドラッグアンドドロップ

WBOY

リリース： 2024-09-04 16:38:26

オリジナル

1330 人が閲覧しました

次の記事では、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:

HTML 内でのドラッグアンドドロップ

Selepas melakukan operasi Seret dan Lepas, outputnya adalah seperti berikut:

HTML 内でのドラッグアンドドロップ

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:

HTML 内でのドラッグアンドドロップ

Selepas operasi seret dan lepas selesai, ia akan kelihatan seperti ini:

HTML 内でのドラッグアンドドロップ

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:

HTML 内でのドラッグアンドドロップ

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 サイトの他の関連記事を参照してください。